Gulp构建

整理自 https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

已经有package.json

第一步：安装gulp到具体项目文件夹

npm install gulp --save-dev

第二步：安装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

第三步：加载插件 glupfile.js

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

1 2 3 4 5 6 7 8 9 10 11 12 13

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来完成，当然啦，不仅限定于缓存图片。

第四步：建立任务 glupfile.js

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

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

1 2 3 4 5 6 7 8 9 10

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' })); });

让我解释一下：

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

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

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

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

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

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

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

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

为了更好的了解Gulp API，强烈建议看一下Gulp API文档，其实Gulp API就这么几个，没什么好可怕的。

js代码校验、合并和压缩

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

1 2 3 4 5 6 7 8 9 10 11

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默认的，了解更多点击这里。

压缩图片

1 2 3 4 5 6

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插件，不过要修改一下上面的代码：

将这行代码:

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

修改成:

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

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

清除文件

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

1 2 3

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

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

设置默认任务（default）

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

1 2 3

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

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

监听文件

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

1 2 3 4 5 6 7 8

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：

1 2 3 4 5 6

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插件，除此之外还能这样做

package.json

如果你熟悉 npm 则可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和模块版本。

在命令行输入 

npm init

会依次要求补全项目信息，不清楚的可以直接回车跳过

name: (gulp-demo) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
...
...
Is this ok? (yes) 

最终会在当前目录中创建 package.json 文件并生成类似如下代码：

{
  "name": "gulp-demo",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/nimojs/gulp-demo.git"
  },
  "keywords": [
    "gulp",
  ],
  "author": "nimojs <nimo.jser@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nimojs/gulp-demo/issues"
  },
  "homepage": "https://github.com/nimojs/gulp-demo"
}