gulp初识

什么是gulp?

Gulp是一个基于流构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。

Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。

安装gulp

尽管可以全局安装gulp

npm install gulp -g

但是更好的做法是在项目根目录下单独安装。

npm install gulp --save-deg

这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。运行的时候，在windows版本下，需要进入node_modules/.bin 目录运行gulp，它会找到你项目根目录下的gulpfile.js文件并执行。如果觉得进入这个目录麻烦，那么可以在 package.json 中得 scripts 段落添加诸如 {“build”: “gulp” }，然后每次在项目目录执行npm run build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

"scripts": {
   "build": "gulp"
 },

gulp的使用

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('default', function () { // 定义默认执行的任务!
  gulp.src('js/*.js') // 作为流输入
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径
})

不要忘了npm install gulp-uglify gulp-concat --save-dev

在下载相关模块之后，执行了一个default任务。执行时调用函数。这个函数作为gulp.task()的第二个参数。

然后，也是难点所在。

gulp.src('js/*.js') // 作为流输入
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径

流

gulp.src()是基于流的构建工具，流既可以用做输入，也可作为输出。

gulp.src()接受一个glob(比如匹配一个或多个文件的字符串)或者一个数组作为输入参数。返回创建对象流代表这些文件。这个流是它的输出也作为uglify()的输入，再经过concat()后返回一个新压缩源文件的流，最后输出的all.min.js被输入gulp.dest()函数并保存。

gulp.src

gulp.src()使用node-glob规则从指定的glob里获取文件。

js/index.js：精确匹配

js/*.js： 匹配js目录下的所有js

js/inde?.js：匹配js目录下的inde开头后面只有一个字符的文件。js/index.js，js/indez.js…

js/**/*.js：**匹配0个或更多的目录和子目录。但不匹配以.开头的目录。js/.sys/index.js

!js/**/*.min.js：不匹配min.js。

监听文件

gulp.watch()返回一个watcher。用来监听文件。这样当我们在监听的文件上做改动的时候运行一个或多个任务。使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。

 watcher.on('change', function (event) { 
   console.log('Event type: ' + event.type); // added, changed, or deleted 
   console.log('Event path: ' + event.path); // The path of the modified file 
 });

最后

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');

gulp.task('default', function () {
  gulp.src(['js/**/*.js', '!js/**/*.min.js']) // 作为流输入
    .pipe(jshint()) // 规范代码格式
    .pipe(jshint.reporter('default')) // gulp-jshint:https://github.com/spalger/gulp-jshint
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径
  var watcher = gulp.watch('js/**/index.js', ['build2']);
  watcher.on('change', function (event) { 
    console.log('Event type: ' + event.type); // added, changed, or deleted 
    console.log('Event path: ' + event.path); // The path of the modified file 
  }); 
})