安装gulp 深入设置任务之前，需先安装gulp： $ npm install gulp -g 这会将gulp安装到全域环境下，让你可以存取gulp的CLI。接著，需要在本地端的专案进行安装。cd到你的专案根目录，执行下列指令(请先确定你有package.json文件)： $ npm install gulp --save-dev 上述指令将gulp安装到本地端的专案内，并纪录于package.json内的devDependencies中。 接著安装一些插件，完成下列任务： 编译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插件清单可以在这里找到。 载入插件 接下来，我们需要建立一个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利用快取来避免重複压缩已经压缩好的图片。 建立任务 编译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样式， .pipe(sass({ style: ‘expanded’ })) 使用pipe()来串流来源档案到某个插件。插件的选项通常在它们各自的Github页面中可以找到。 .pipe(gulp.dest(‘dist/assets/css’)); 这个gulp.dest()API是用来设定目的路径。一个任务可以有多个目的地，一个用来输出扩展的版本，一个用来输出缩小化的版本。这个在上述的styles任务中已经有展示。

JSHINT，拼接及缩小化JAVASCRIPT 希望你现在对于如何建立一个新的gulp任务有好想法。接下来，我们将设定脚本任务，包括lint、拼接及丑化: 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。这裡我使用预设的reporter，适用于大多数人。更多有关此设定，你可以在JSHint网站取得。

图片压缩 接著，我们将设定图片压缩:

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处理。我们可以稍微更进一步，利用快取保存已经压缩过的图片，以便每次进行此任务时不需要再重新压缩。这裡只需要gulp-cache外挂–稍早已经安装。我们需要额外设置才能使用这个外挂，因此修改这段程式码: .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })) 成为这段: .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) 现在只有新的或更动的图片会被压缩。 在我们进行部署之前，清除目的地目录并重建档案是一个好主意–以防万一任何已经被删除的来源档案遗留在目的地目录之中:

gulp.task(‘clean’, function() {
return gulp.src([‘dist/assets/css’, ‘dist/assets/js’, ‘dist/assets/img’], {read: false}) .pipe(clean()); }); 我们可以传入一个目录阵列到gulp.src。因为我们不想要读取已经被删除的文件，我们可以加入read: false选项来防止gulp读取文件内容–让它快一些。

预设任务 我们可以建立一个预设任务，当只输入$ gulp指令时执行的任务，这裡执行三个我们所建立的任务:

gulp.task(‘default’, [‘clean’], function() {
gulp.start(‘styles’, ‘scripts’, ‘images’); }); 注意额外传入gulp.task的阵列。这裡我们可以定义任务相依(task dependencies)。在这个范例中，gulp.start开始任务前会先执行清理(clean)任务。Gulp中所有的任务都是并行(concurrently)执行，并没有先后顺序哪个任务会先完成，所以我们需要确保clean任务在其他任务开始前完成。

注意: 透过相依任务阵列来执行clean而非gulp.start是经过考虑的，在这个情境来看是最好的选择，以确保清理任务全部完成。

为了能够j监听档案，并在更动发生后执行相关任务，首先需要建立一个新的任务，使用gulp.watchAPI来监听文件: gulp.task(‘watch’, function() { // 看守所有.scss档 gulp.watch(‘src/styles/*/.scss’, [‘styles’]);

// 看守所有.js档 gulp.watch(‘src/scripts/*/.js’, [‘scripts’]);

// 看守所有图片档 gulp.watch(‘src/images/*/’, [‘images’]);

}); 透过gulp.watch指定想要监听的文件，并且透过相依任务阵列定义任务。执行$ gulp watch来开始看守档案，任何.scss、.js或图片档案一旦有了更动，便会执行相对应的任务。

关注我的个人项目 totemhub