在次浅谈gulp前端自动化构建工具

在次浅谈gulp前端自动化构建工具

gulp是一个自动化的任务运行工具，会按照我们预先设定的顺序自动执行一系列的任务，这样可以提高我们的工作效率，尤其是在这个以时间换金钱的时代。(*^__^*) 嘻嘻……

## 1.安装 ##
gulp基于node平台，所以首先需要安装node环境，安装完node环境之后，可以执行下面的命令。


	npm install -g gulp
	
	npm install --save-dev gulp

安装gulp之外，还需要安装gulp的插件模块，下面以安装gulp-uglify模块为演示。

### 执行下面的命令 ###

	npm install --save-dev gulp-uglify
## 2.gulpfile.js ##
在项目的根目录下创建gulpfile.js文件。

	var gulp = require('gulp');
	var uglify = require('gulp-uglify');
	
	gulp.task('minify', function () {
	  gulp.src('js/app.js')
	    .pipe(uglify())
	    .pipe(gulp.dest('build'))
	});
上面代码中，gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务minify。task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，然后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。

task方法的回调函数使用了两次pipe方法，也就是说做了两种处理。第一种处理是使用gulp-uglify模块，压缩源码；第二种处理是使用gulp模块的dest方法，将上一步的输出写入本地文件，这里是build.js（代码中省略了后缀名js）。

执行minify任务时，就在项目目录中执行下面命令就可以了。

	gulp minify
## 3.gulp模块的方法 ##
### 3.1src() ###
gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。

- js/app.js：指定确切的文件名。
- js/*.js：某个目录所有后缀名为js的文件。
- js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
- !js/app.js：除了js/app.js以外的所有文件。
- *.+(js	css)：匹配项目根目录下，所有后缀名为js或css的文件。

src方法的参数还可以是一个数组，用来指定多个成员。


	gulp.src(['js/**/*.js', '!js/**/*.min.js'])


### 3.2dest() ###
dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。

	gulp.src('./client/templates/*.jade')
	  .pipe(jade())
	  .pipe(gulp.dest('./build/templates'))
	  .pipe(minify())
	  .pipe(gulp.dest('./build/minified_templates'));
dest方法还可以接受第二个参数，表示配置对象。

	gulp.dest('build', {
	  cwd: './app',
	  mode: '0644'
	})
配置对象有两个字段。cwd字段指定写入路径的基准目录，默认是当前目录；mode字段指定写入文件的权限，默认是0777。

### 3.3task() ###
task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。


	gulp.task('greet', function () {
	   console.log('Hello world!');
	});

task方法还可以指定按顺序运行的一组任务。


	gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定build任务，它由css、js、imgs三个任务所组成，task方法会并发执行这三个任务。注意，由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正是css任务运行结束。

如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。


	gulp.task('css', ['greet'], function () {
	   // Deal with CSS here
	});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。

task方法的回调函数，还可以接受一个函数作为参数，这对执行异步任务非常有用。

	// 执行shell命令
	var exec = require('child_process').exec;
	gulp.task('jekyll', function(cb) {
	  // build Jekyll
	  exec('jekyll build', function(err) {
	    if (err) return cb(err); // return error
	    cb(); // finished task
	  });
	});
如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务。


	gulp.task('default', function () {
	  // Your default task
	});
	
	// 或者
	
	gulp.task('default', ['styles', 'jshint', 'watch']);

执行的时候，直接使用gulp，就会运行styles、jshint、watch三个任务。

### 3.4watch() ###
watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。


	gulp.task('watch', function () {
	   gulp.watch('templates/*.tmpl.html', ['build']);
	});

上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。

watch方法也可以用回调函数，代替指定的任务。


	gulp.watch('templates/*.tmpl.html', function (event) {
	   console.log('Event type: ' + event.type);
	   console.log('Event path: ' + event.path);
	});

另一种写法是watch方法所监控的文件发生变化时（修改、增加、删除文件），会触发change事件。可以对change事件指定回调函数。


	var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
	
	watcher.on('change', function (event) {
	   console.log('Event type: ' + event.type);
	   console.log('Event path: ' + event.path);
	});

除了change事件，watch方法还可能触发以下事件。

- end：回调函数运行完毕时触发。
- error：发生错误时触发。
- ready：当开始监听文件时触发。
- nomatch：没有匹配的监听文件时触发。


watcher对象还包含其他一些方法。

- watcher.end()：停止watcher对象，不会再调用任务或回调函数。
- watcher.files()：返回watcher对象监视的文件。
- watcher.add(glob)：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。
- watcher.remove(filepath)：从watcher对象中移走一个监视的文件。

## 4.gulp-load-plugins模块 ##

一般情况下，gulpfile.js中的模块需要一个个加载。


	var gulp = require('gulp'),
	    jshint = require('gulp-jshint'),
	    uglify = require('gulp-uglify'),
	    concat = require('gulp-concat');
	
	gulp.task('js', function () {
	   return gulp.src('js/*.js')
	      .pipe(jshint())
	      .pipe(jshint.reporter('default'))
	      .pipe(uglify())
	      .pipe(concat('app.js'))
	      .pipe(gulp.dest('build'));
	});

上面代码中，除了gulp模块以外，还加载另外三个模块。

这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写，就是下面这样。


	var gulp = require('gulp'),
	    gulpLoadPlugins = require('gulp-load-plugins'),
	    plugins = gulpLoadPlugins();
	
	gulp.task('js', function () {
	   return gulp.src('js/*.js')
	      .pipe(plugins.jshint())
	      .pipe(plugins.jshint.reporter('default'))
	      .pipe(plugins.uglify())
	      .pipe(plugins.concat('app.js'))
	      .pipe(gulp.dest('build'));
	});

上面代码假设package.json文件包含以下内容。


	{
	   "devDependencies": {
	      "gulp-concat": "~2.2.0",
	      "gulp-uglify": "~0.2.1",
	      "gulp-jshint": "~1.5.1",
	      "gulp": "~3.5.6"
	   }
	}
## 5.gulp-livereload模块 ##
gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。


	var gulp = require('gulp'),
	    less = require('gulp-less'),
	    livereload = require('gulp-livereload'),
	    watch = require('gulp-watch');
	
	gulp.task('less', function() {
	   gulp.src('less/*.less')
	      .pipe(watch())
	      .pipe(less())
	      .pipe(gulp.dest('css'))
	      .pipe(livereload());
	});

上面代码监视less文件，一旦编译完成，就自动刷新浏览器。

最后附上自己前一年前写的一个自动化任务，仅供参考：


	// 载入Gulp模块
	var gulp = require('gulp');
	var less = require('gulp-less');
	var autoprefixer = require('gulp-autoprefixer');
	var cssnano = require('gulp-cssnano');
	var concat = require('gulp-concat');
	var uglify = require('gulp-uglify');
	var htmlmin = require('gulp-htmlmin');
	var browserSync = require('browser-sync');
	var reload = browserSync.reload;
	
	gulp.task('style', function() {
	  gulp.src('src/styles/*.less')
	    .pipe(less())
	    .pipe(autoprefixer({
	      browsers: ['last 2 versions']
	    }))
	    .pipe(cssnano())
	    .pipe(gulp.dest('dist/styles'))
	    .pipe(reload({
	      stream: true
	    }));
	});
	
	gulp.task('script', function() {
	  gulp.src('src/scripts/*.js')
	    .pipe(concat('app.js'))
	    .pipe(uglify())
	    .pipe(gulp.dest('dist/scripts'))
	    .pipe(reload({
	      stream: true
	    }));
	});
	
	gulp.task('image', function() {
	  gulp.src('src/images/*.*')
	    .pipe(gulp.dest('dist/images'))
	    .pipe(reload({
	      stream: true
	    }));
	})
	
	gulp.task('html', function() {
	  gulp.src('src/*.html')
	    .pipe(htmlmin({
	      collapseWhitespace: true,
	      collapseBooleanAttributes: true,
	      removeAttributeQuotes: true,
	      removeComments: true,
	      removeEmptyAttributes: true,
	      removeScriptTypeAttributes: true,
	      removeStyleLinkTypeAttributes: true,
	    }))
	    .pipe(gulp.dest('dist'))
	    .pipe(reload({
	      stream: true
	    }));
	});
	
	gulp.task('serve', ['style', 'script', 'image', 'html'], function() {
	  browserSync({
	    notify: false,
	    port: 2015,
	    server: {
	      baseDir: ['dist']
	    }
	  });
	
	
	  gulp.watch('src/styles/*.less', ['style']);
	  gulp.watch('src/scripts/*.js', ['script']);
	  gulp.watch('src/images/*.*', ['image']);
	  gulp.watch('src/*.html', ['html']);
	});


在github上面的地址：[风流倜傥小小张](https://github.com/zhnaglei/gulp)