一张脑图，几行demo代码入门gulp

gulp.png

在项目根目录执行以下命令，安装gulp到你的项目目录

npm install --save-dev gulp

生成gulpfile.js，代码如下

var gulp = require('gulp'),
    concat = require("gulp-concat");
//新建一个名称为one的异步任务
gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
                              //one是一个异步执行的任务
    setTimeout(function(){
        console.log('one is done');
        cb();  //执行回调，表示这个异步任务已经完成
    },5000);
});

//reload任务依赖one任务
gulp.task('reload',['one'], function () {
    //do something
    console.log('reload');
});
//default为入口函数,gulp中必须有这个任务方能正常运行
gulp.task('default', function () {
    //将源文件routes目录下的js文件合并成all.js文件,然后复制到dist/js目录下
    gulp.src('routes/*.js')  //要合并的文件
        .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
        .pipe(gulp.dest('dist/js'));
//watch的时候保持控制台开启,否则无法生效
//监听routes文件夹下的js文件,发生变化后执行one任务然后执行uglify任务,最后执行
// reload任务,one任务的这种写法可以确保,one,和uglify,reload是顺序执行的
    gulp.watch('routes/*.js', ['reload']);
});

cd到项目根目录，执行

gulp

不要关闭控制台，试着修改routes目录下的js文件，观察控制台的变化，然后重读gulpfile.js代码

参考 ：
前端构建工具gulpjs的使用介绍及技巧
gulp中文网