前端构建工具之gulp的安装和配置

在选择构建工具时，看到更多人推荐gulp，从此入了gulp的坑～

一、安装node环境

百度谷歌一下就有了，在终端中分别输入 node -v 和 npm -v，若显示node和npm的版本号则说明node环境装好了。

二、安装gulp

linux下安装全局环境：

sudo npm install -g gulp

或cd进入项目目录下安装gulp到项目本地：

npm install gulp --save-dev

--save-dev的意思是将安装的gulp版本信息写入package.json,更新devDependencies值，以表明项目需要依赖gulp；在项目迁移时，执行npm install即可安装项目环境。

三、安装依赖文件

• 检查javascript（gulp-jshint）
• 编译sass/less文件（gulp-sass / gulp-less）
• sass/less混入库（node-bourbon / lesshat）
• 压缩css文件（gulp-minify-css）
• 合并文件（gulp-concat）
• 压缩js文件（gulp-uglify）
• 重命名文件（gulp-rename）
• ...

举个栗子：

npm install gulp-jshint gulp-sass gulp-concat node-bourbon --save-dev

四、新建gulpfile.js文件

gulp只有五个方法：task、run、watch、src、和dest。gulpfile文件书写可以参照下面的栗子：

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

// 编译Sass
gulp.task('sass', function () {
    gulp.src('./css/*.scss')
        .pipe(sass({
            includePaths: require('node-bourbon').includePaths
        }))
        .pipe(concat('style.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('./css'));
});

// 语法检查
gulp.task('jshint', function() {
    return gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合并文件之后压缩代码
gulp.task('minify', function(){
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('./dist'))
});

// 默认任务
gulp.task('default', function () {
    gulp.run('sass');
    gulp.run('jshint');
    gulp.run('minify');
    gulp.watch('./css/*.scss', function () {
        gulp.run('sass');
    });
});

五、执行gulp

在终端执行下面的命令执行所有的任务

gulp

或者执行单个任务

gulp minify

OK,大功告成～

参考:

• 干了这杯可乐！gulp上手指南
• 前端构建工具gulp入门教程
• gulp思维-gulp高级技巧
• gulp API文档
• Bourbon x gulp.js