Gulp 入门教程

最近流行前端构建工具，苦于之前使用 Grunt，代码很难阅读，现在出了 Gulp，真是摆脱了痛苦。发现了一篇很好的 Gulp 英文教程，整理翻译给大家看看。

为什么使用 Gulp

Gulp 基于 Node.js 的前端构建工具，通过 Gulp 的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新，还有许多强大的插件可以在 这里(link:https://gulpjs.com/plugins/) 查找。比起 Grunt 不仅配置简单而且更容易阅读和维护，我们可以做一个对比：

Grunt:

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},
autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},
grunt.registerTask('styles', ['sass', 'autoprefixer']);

在 Grunt 里面，每个插件使用的方式相对独立，正如上面的代码通过 sass 插件将 main.sass 文件编译成 main.css 文件，接着 autoprefixer 插件再对编译好的 main.css 文件进行修改，最后覆盖 main.css。那么覆盖文件就是多余的了，有没办法做到 sass 和 autoprefixer 一并处理完再生成 main.css？我们来看看 Gulp 是如何做到的：

Gulp：

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

使用 Gulp 我们只需要放一个路径，通过管道方式使用插件，最后生成文件，是不是有种 jQuery 的感觉。这种方式不仅提高效率而且一眼就看清了输入文件和输出文件，再也不用看 gruntfile 看得眼花缭乱了。

再打个比喻，Grunt 的插件就像独立的工厂，这个工厂生成出来的产品打包封装好后再送到另一个工厂去加工，使用了 Gulp 后实现了工厂的合并，所有东西都在一个工厂里完成了。现在是否对 Gulp 感兴趣了，那就开始使用 Gulp 吧！

安装

首先我们要全局安装一遍：

$ npm install gulp -g

接着我们要进去到项目的根目录再安装一遍（确保你根目录存在 package.json 文件）：

$ npm install gulp --save-dev

—save-dev 这个属性会将条目保存到你 package.json 的 devDependencies 里面

安装 Gulp 插件

我们将要使用 Gulp 插件来完成我们以下任务：

• sass 的编译（ gulp-ruby-sass(link:https://github.com/sindresorhus/gulp-ruby-sass) ）
• 自动添加 css 前缀（ gulp-autoprefixer(link:https://github.com/Metrime/gulp-autoprefixer) ）
• 压缩 css（ gulp-minify-css(link:https://github.com/jonathanepollack/gulp-minify-css) ）
• js 代码校验（ gulp-jshint(link:https://github.com/spenceralger/gulp-jshint) ）
• 合并 js 文件（ gulp-concat(link:https://github.com/wearefractal/gulp-concat) ）
• 压缩 js 代码（ gulp-uglify(link:https://github.com/terinjokes/gulp-uglify) ）
• 压缩图片（ gulp-imagemin(link:https://github.com/sindresorhus/gulp-imagemin) ）
• 自动刷新页面（ gulp-livereload(link:https://github.com/vohof/gulp-livereload) ）
• 图片缓存，只有图片替换了才压缩（ gulp-cache(link:https://github.com/jgable/gulp-cache) ）
• 更改提醒（ gulp-notify(link:https://github.com/mikaelbr/gulp-notify) ）
• 清除文件（ del(link:https://www.npmjs.org/package/del) ）

安装这些插件需要运行如下命令：

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

上面是一些常用的插件，如果想要找更多的插件点击 这里(link:https://gratimax.net/search-gulp-plugins/)

加载插件

接着我们要创建一个 gulpfile.js 在根目录下，然后在里面加载插件：

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

Gulp 的插件和 Grunt 有些许不一样，Grunt 插件是为了更好的完成一项任务。就像 Grunt 的 imagemin 插件就利用了缓存来避免重复压缩，而 Gulp 要利用 gulp-cache 来完成，当然啦，不仅限定于缓存图片。

建立任务

编译 sass、自动添加 css 前缀和压缩

首先我们编译 sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还要压缩，给文件添加 .min 后缀再输出压缩文件到指定目录，最后提醒任务完成了：

gulp.task('styles', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

让我解释一下：

gulp.task('styles', function () {...});

gulp.task 这个 API 用来创建任务，在命令行下可以输入 $ gulp styles 来执行上面的任务。

return gulp.src('src/styles/main.scss')

gulp.src 这个 API 设置需要处理的文件的路径，可以是多个文件以数组的形式 [main.scss, vender.scss] ，也可以是正则表达式 /**/*.scss 。

.pipe(sass({ style: 'expanded' }))

我们使用 .pipe() 这个 API 将需要处理的文件导向 sass 插件，那些插件的用法可以在 github 上找到，为了方便大家查找我已经在上面列出来了。

.pipe(gulp.dest('dist/assets/css'));

gulp.dest() API 设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

为了更好的了解 Gulp API，强烈建议看一下 Gulp API 文档(link:https://github.com/gulpjs/gulp/blob/master/docs/API.md) ，其实 Gulp API 就这么几个，没什么好可怕的。

js 代码校验、合并和压缩

希望大家已经知道如何去创建一个任务了，接下来我们完成 scripts 的校验、合并和压缩的任务吧：

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

需要提醒的是我们要设置 JSHint 的 reporter 方式，上面使用的是 default 默认的，了解更多点击 这里(link:https://www.jshint.com/docs/reporters/) 。

压缩图片

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
});

这个任务使用 imagemin 插件把所有在 src/images/ 目录以及其子目录下的所有图片（文件）进行压缩，我们可以进一步优化，利用缓存保存已经压缩过的图片，使用之前装过的 gulp-cache(link:https://github.com/jgable/gulp-cache) 插件，不过要修改一下上面的代码：

将这行代码:

.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

修改成:

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

现在，只有新建或者修改过的图片才会被压缩了。

清除文件

在任务执行前，最好先清除之前生成的文件：

gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});

在这里没有必要使用 Gulp 插件了，可以使用 NPM 提供的插件。我们用一个回调函数（ cb ）确保在退出前完成任务。

设置默认任务（default）

我们在命令行下输入 $ gulp 执行的就是默认任务，现在我们为默认任务指定执行上面写好的三个任务：

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

在这个例子里面，clean 任务执行完成了才会去运行其他的任务，在 gulp.start() 里的任务执行的顺序是不确定的，所以将要在它们之前执行的任务写在数组里面。

监听文件

为了监听文件的是否修改以便执行相应的任务，我们需要创建一个新的任务，然后利用 gulp.watch API 实现：

gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('src/images/**/*', ['images']);
});

我们将不同类型的文件分开处理，执行对应的数组里的任务。现在我们可以在命令行输入 $ gulp watch 执行监听任务，当 .sass 、 .js 和图片修改时将执行对应的任务。

自动刷新页面

Gulp 也可以实现当文件修改时自动刷新页面，我们要修改 watch 任务，配置 LiveReload：

gulp.task('watch', function() {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

要使这个能够工作，还需要在浏览器上安装 LiveReload 插件，除此之外还能 这样做(link:https://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually-)

所有任务放一起

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */
// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');
// Styles
gulp.task('styles', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('src/images/**/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

在 gist(link:https://gist.github.com/markgoodyear/8497946#file-gruntfile-js) 上有源码，并且附上 Grunt 的实现作为对比。