gulp 是基于nodejs 的一个自动化任务管理工具。相对于grunt更方便、易用，快捷。

• gulp的官网
• gulp中文版
• gulp优教程

1.安装
2.建 gulpfile.js 文件
3.gulp 的核心方法
3.1src();
3.2dest();
3.3 task();
3.4 watch();

1. gulp-load-plugins模块
   

2. gulp-livereload模块
   

6.总结

gulp 是基于nodejs 的一个自动化任务管理工具。相对于grunt更方便、易用，快捷。

• gulp的官网
• gulp中文版
• gulp优教程

1.安装
2.建 gulpfile.js 文件
3.gulp 的核心方法
3.1src();
3.2dest();
3.3 task();
3.4 watch();

1. gulp-load-plugins模块
   

2. gulp-livereload模块
   

6.总结

1.安装

Gulp需要全局安装，然后再在项目的开发目录中安装为本地模块。先进入项目目录，运行下面的命令。

npm install -g gulp

npm install --save-dev gulp

除了安装gulp以外，不同的任务还需要安装不同的gulp插件模块。举例来说，下面代码安装了gulp-uglify模块。

npm install --save-dev gulp-uglify

2.gulpfile.js

项目根目录中的gulpfile.js，是Gulp的配置文件。下面就是一个典型的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

从上面的例子中可以看到，gulp充分使用了“管道”思想，就是一个数据流（stream）：src方法读入文件产生数据流，dest方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。
下面是另一个数据流的例子。

gulp.task('js', function () {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'));
});

上面代码使用pipe命令，分别进行jshint、uglify、concat三步处理。

3.gulp模块的方法

### 3.1 src() 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.2 dest()

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.3 task()

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.4 watch()

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文件，一旦编译完成，就自动刷新浏览器。

6.gulp排除文件的用法

var gulp = require('gulp');
var del = require('del');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');
var colors = require('colors/safe');
var gulpif = require('gulp-if');

gulp.task('build', function () {
    gutil.log(colors.red('开始压缩js...'));


    gulp.src(['*.js', '!gulpfile.js'])
        .pipe(gulpif('!lang-*.js', uglify()))
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function () {
    gutil.log(colors.red('开始清空文件'));
    del([
        'dist'
    ])
});

本意是想压缩当前目录下的文件夹,但是要排除掉以lang开头的js文件,但是我查看了一下结果,发现lang开头的js文件也被压缩了,这是为啥呢? 在gulp.src数组参数用 ！lang-*.js #7.总结

插件	地址	用途
gulp-ruby-sass	地址	基于ruby和sass的Sass文件编译，可将Sass文件为CSS文件
gulp-autoprefixer	地址	Autoprefixer，可以解析CSS文件，并且添加浏览器前缀到CSS规则里
gulp-minify-css	地址	CSS文件压缩工具
gulp-jshint	地址	JSHint，一个JS代码检查工具，可以检测JavaScript中错误和潜在问题
gulp-uglify	地址	JS代码优化工具，可用于压缩和美化（或者叫“丑化”）JavaScript代码
gulp-concat	地址	文件拼接工具，可用于多个CSS文件或多个JS文件的合并
gulp-imagemin	地址	图片压缩工具
gulp-clean	地址	目标目录清理，在用于gulp任务执行前清空目标目录
gulp-cache	地址	资源缓存处理，可用于缓存已压缩过的资源，如：图片
gulp-notify	地址	任务通知工具，可用于某项任务执行完成的在控制台输出通知
gulp-livereload	地址	服务器资源监控，当服务端资源变化时对页面进行刷新。需要要配合浏览器插件使用或在页面这样处理，使用比较复杂，非必要时不推荐使用

• gulpfile.js

    var transport = require("gulp-seajs-transport");
    var gulp = require("gulp");
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var paths = {
      scripts: ['./dist/*.js']
    };
    gulp.task('scripts', function() {
      return gulp.src(paths.scripts)
     		.pipe(transport())
         	.pipe(concat('all.min.js'))
         	.pipe(uglify())
         	.pipe(sourcemaps.write())
       	 	.pipe(gulp.dest('build/js'));
    });
    gulp.task('watch', function() {
      gulp.watch(paths.scripts, ['scripts']);
    });
    gulp.task('default', ['watch', 'scripts']);
  

8.关于访问国外npm慢的解决方法

国内访问外网都很慢，甚至不能访问！大家都懂，都很无奈！ 安装Node时自带的npm地址默认是：http://registry.npmjs.org ，访问很慢！ 没事，咋们换成国内的！怎么换？

8.1 通过config命令

npm config set registry http://registry.cnpmjs.org  npm info underscore

（如果上面配置正确这个命令会有字符串response）

8.2.命令行指定

npm --registry http://registry.cnpmjs.org info underscore

8.3.编辑node_modules\npm.npmrc加入下面内容

registry = http://registry.cnpmjs.org

如果上面的npm地址不行的话，大家可以试试淘宝的npm，非常稳定:

地址是：https://registry.npm.taobao.org