前端自动化工具gulp初体验

共计 5096 个字符，预计需要花费 13 分钟才能阅读完成。

Glup 使用 node.js 串流 (streams) 让建构更快速，不须写出资料到硬盘的暂存档案 / 目录。如果你想了解更多有关串流–虽然不是必须的–你可以阅读这篇文章。Gulp 利用来源档案当作输入，串流到一群外挂(plugins)，最后取得输出的结果，并非配置每一个外挂的输入与输出–就像 Grunt。让我们来看个范例，分别在 Gulp 及 Grunt 建构 Sass：

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 的输入，并储存输出结果。在设置 Autoprefixer 时，需要将 Sass 的输出结果作为输入，产生出一个新档案。来看看在 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 中我们只需要输入一个档案即可。经过外挂 Sass 处理，再传到外挂 Autoprefixer，最终取得一个档案。这样的流程加快建构过程，省去读取及写出不必要的档案，只需要最终的一个档案。

所以，有趣了，现在要？让我们开始安装 gulp 并建立一个基本的 gulpfile，包含几个核心任务来作为入门吧。

安装 gulp

深入设置任务之前，需先安装 gulp：
npm install gulp -g

这会将 gulp 安装到全域环境下，让你可以存取 gulp 的 CLI。接著，需要在本地端的专案进行安装。cd 到你的专案根目录，执行下列指令(请先确定你有 package.json 档案)：

npm install gulp --save-dev

上述指令将 gulp 安装到本地端的专案内，并纪录于 package.json 内的 devDependencies 物件。

安装 gulp 外挂

接著安装一些外挂，完成下列任务：
编译 Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

执行下列指令来安装这些外挂:

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

指令将会安装必要的外挂，并纪录于 package.json 内的 devDependencies 物件。完整的 gulp 外挂清单可以在这裡找到。
这些插件对下载到 nodejs 的 node_modules 文件夹下，在另一个项目中就不需要安装了，直接执行关联。
在安装 clean 的时候会有一个错误提示，应该是插件名换了，根据提示从新安装就好了。在 gulp.js 文件里，还是使用 clean。

载入外挂

接下来，我们需要建立一个 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'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');

呼！看起来比 Grunt 有更多的事要做，对吧？Gulp 外挂跟 Grunt 外挂有些许差异–它被设计成做一件事并且做好一件事。例如；Grunt 的 imagemin 利用快取来避免重複压缩已经压缩好的图片。在 Gulp 中，这必须透过一个快取外挂来达成，当然，快取外挂也可以拿来快取其他东西。这让建构过程中增加了额外的弹性层面。蛮酷的，哼？

我们也可以像 Grunt 一样自动载入所有已安装的外挂，但这不在此文章目的，所以我们将维持在手动的方式。

建立任务

编译 Sass，Autoprefix 及缩小化

首先，我们设置编译 Sass。我们将编译 Sass、接著通过 Autoprefixer，最后储存结果到我们的目的地。接著产生一个缩小化的.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.taskAPI 用来建立任务。可以透过终端机输入 $ gulp styles 指令来执行上述任务。

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

这个 gulp.srcAPI 用来定义一个或多个来源档案。允许使用 glob 样式，例如 /**/*.scss 比对多个符合的档案。传回的串流 (stream) 让它成为非同步机制，所以在我们收到完成通知之前，确保该任务已经全部完成。

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

这个 gulp.srcAPI 用来定义一个或多个来源档案。允许使用 glob 样式，例如 /**/*.scss 比对多个符合的档案。传回的串流 (stream) 让它成为非同步机制，所以在我们收到完成通知之前，确保该任务已经全部完成。

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

使用 pipe()来串流来源档案到某个外挂。外挂的选项通常在它们各自的 Github 页面中可以找到。上面列表中我有留下各个外挂的连结，让你方便使用。

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

这个 gulp.dest()API 是用来设定目的路径。一个任务可以有多个目的地，一个用来输出扩展的版本，一个用来输出缩小化的版本。这个在上述的 styles 任务中已经有展示。

我建议阅读 gulp 的 API 文件，以了解这些函式方法。它们并不像看起来的那样可怕！

根据上面一个小例子，可以写出很多。贴出一个我最近使用的 gulp.js

var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
cache = require('gulp-cache'),
rename = require('gulp-rename'),
notify = require('gulp-notify');

gulp.task('styles',function(){return gulp.src('resource/css/**/*.css')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(notify({message:'Styles task complete'}));
});
gulp.task('scripts', function() {return gulp.src('resource/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(notify({ message: 'Scripts task complete'}));
});
gulp.task('images', function() {return gulp.src('resource/img/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true}))
.pipe(gulp.dest('assets/img'))
.pipe(notify({ message:'Images task complete'}));
});
gulp.task('clean',function(){return gulp.src(['assets/css','assets/js','assets/img'], {read: false})
.pipe(clean());
});
gulp.task('watch',function(){gulp.watch('resource/css/**/*.css',['styles']);
gulp.watch('resource/js/**/*.js',['scripts']);
gulp.watch('resource/img/**/*',['images']);
});
gulp.task('default',['clean','watch'],function(){gulp.start('styles','scripts','images');
});