Gulp 入门

gulp logo

Gulp 是什么？

Gulp 是 Grunt 的替代者。作为构建工具，Gulp 更具有语法简洁易懂的优势，所以学习成本更低。
利用 Gulp，我们不仅可以对HTML、CSS（LESS|SASS）、JS（CoffeeScript）进行编译；还可以监听文件的变化，同时借助 livereloader 实时地刷新页面；甚至还可以对图片进行压缩优化。下面记录一下我的 Gulp 学习之旅 。

安装 Gulp

Gulp 需要 nodejs.org 运行环境，首先请确保你的机器上安装了 node.js。

安装全局 Gulp

npm i --global gulp

安装本地（作为开发依赖项）Gulp

npm i --save-dev gulp

创建 gulpfile.js 文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  console.log('hello world!');
});

运行 Gulp
在终端运行：

gulp

gulp 后不接参数，那么默认会执行 default 任务，所以上面的代码会在终端中输出 hello world!。

使用插件压缩脚本

gulp 依靠各种插件（plugin）实现常用功能。比方说我们要对所有的 *.js 文件进行压缩（借助 gulp-uglify 插件）

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('default', function() {
  gulp.src('js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('build/js'))；
});

重新在终端运行 gulp， Gulp 会对 js/ 目录下的所有 js文件进行压缩，然后输出到 build/js 目录。

给任务（Task）命名

上面我们定义了一个对 js 进行压缩的任务，并把它放在了默认的（default）任务下，其实我们最好把处理脚本的相关操作抽出来，当独作为一个任务（例如 scripts ）更为合理：

gulp.task('scripts', function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/js'));
});

我们可以在终端运行指定的任务项，只需在 gulp 后面接上任务名参数：

gulp scripts

监听文件的改变

我们可以借助 gulp-watch 插件来监听文件的改变：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch('js/*.js', ['scripts']);
});

这里我们定义了一个 watch 任务，监听 js/*.js 文件的改变， watch() 的第二个参数是文件发生改变之后的回调，这里表示，文件一旦发生改变，就会执行前面我们定义的 scripts 任务，重新对 js 文件进行压缩处理。

用Gulp来编译LESS

Gulp 不仅可以对 js 进行压缩处理，还可以编译 less/scss 文件，这一功能也是我们经常在项目中用到的。这里需要借助 gulp-less 插件：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    less = require('gulp-less');

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('css/'));
});

使用Plumber来让Gulp保持运行

如果我们在编写代码的过程中，不小心代码写错了，存在语法错误，那么编译不会被通过，gulp 会在终端抛出异常，同时终止。这不是我们想要的，我们希望存在语法错误是，Gulp 能够给我们提示，并继续保持运行，而不是中断，这个时候就要借助 gulp-plumber 来帮我们做这个事：

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('css/'))
});

注意： 我们要保证 plumber() 要放在其他操作前面，这样才能捕捉到错误异常。

实时更新（LiveReload）页面

我们期望代码更新后不仅能够重新编译代码，而且希望浏览器帮我们自己刷新网页，这个时候，我们就需要用到 gulp-livereload 的帮助了，同时我们需要安装 livereload 的Chrome插件。

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

注意： 与 plumber() 相反，我们要把 livereload() 放在操作的最后。

简单的进行图像压缩

我们可以借助 gulp-imagemin 对图片进行优化：

gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});

自动补全浏览器前缀

我们还可以用 gulp-autoprefixer 对 CSS3 中的一些属性进行前缀的自动补全（例如 transition, transform 等 ）：

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(prefixer('last 2 versions'))
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

prefixer() 的参数可参考这里

最终的 gulpfile.js 配置文件

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'),
    livereload = require('gulp-livereload'),
    prefixer = require('gulp-autoprefixer');

// Scripts Task
gulp.task('scripts', function () {
    gulp.src('js/*.js')
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest('build/js'))
        .pipe(livereload());
});

// Styles Task
gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(prefixer('last 2 versions'))
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

// HTML Task
gulp.task('html', function() {
    gulp.src('*.html')
        .pipe(livereload());
})

// Image Task
gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});

// Watch Task
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('less/**/*.less', ['styles']);
    gulp.watch('*.html', ['html']);
});

gulp.task('default', ['scripts', 'styles', 'watch']);

总结

上面列出了一些日常开发中比较常用的几种功能，其他更多的功能可参考官方 plugin 库，根据个人需求对其功能继续扩展。

文章地址：http://blog.mcbird.cn/2015/08/28/learning-gulp/