npm install -g gulp // 全局安装gulp命令  
npm install --save-dev gulp // 在项目中安装依赖

项目依赖

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-imagemin": "^3.4.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-rev": "^8.0.0",
    "gulp-rev-collector": "^1.2.2",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^3.0.0",
    "open": "0.0.5"
  }

在项目的根目录中创建gulpfile.js 文件（代码可以根据实际 需要修改）
代码实例

'use strict';

// 载入外挂
// var gulp = require('gulp'),  
//   browserify = require('browserify'),//这里用不上，管理js依赖的
//   source = require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
//   uglify = require('gulp-uglify'),//混淆js
//   clean = require('gulp-clean'),//清理文件
//   notify = require('gulp-notify'),//加控制台文字描述用的
//   buffer = require('vinyl-buffer'),
//   less = require('gulp-less'),//转换less用的
//   autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
//   minifycss = require('gulp-minify-css'),//压缩
//   concat = require('gulp-concat'),//合并
//   fileinclude = require('gulp-file-include'),// include 文件用
//   template = require('gulp-template'),//替换变量以及动态html用
//   rename = require('gulp-rename'),//重命名
//   webserver = require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
//   imagemin = require('gulp-imagemin'),//图片压缩
//   gulpif  = require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
//   rev  = require('gulp-rev'),//加MD5后缀
//   revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
//   addsrc = require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
//   del = require('del'),//也是个删除··· 
//   vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
//   runSequence = require('run-sequence');//控制task顺序

//引入gulp
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    connect = require('gulp-connect'),
    imagemin = require('gulp-imagemin'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    clean = require('gulp-clean'),//清理文件
    runSequence = require('gulp-sequence'),
    uglify = require('gulp-uglify');//混淆js;
//这样的话 其他的模块可以直接使用 $ 符号来引入
// var $ = require('gulp-load-plugins')();

var open = require('open');

// 定义目录路径
var app = {
    // 源代码
    srcPath: 'src/',
    // 预发布环境
    buildPath: 'build/',
    // 项目，发布目录上产部署
    distPath: 'dist/'
}

// 将html拷贝到distPath中
// gulp.task('views', function(){
//  gulp.src(app.srcPath + 'views/**/*.html')
//      .pipe(revCollector())
//      .pipe(gulp.dest(app.distPath + 'views'))
//      .pipe(connect.reload());
// })

// 将html拷贝到distPath中
gulp.task('html', ['script'], function(){
     gulp.src(['./rev/*.json', app.srcPath + 'index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest(app.distPath))
        .pipe(connect.reload());

    gulp.src(app.srcPath + 'views/**/*.html')
        .pipe(revCollector())
        .pipe(gulp.dest(app.distPath + 'views'))
        .pipe(connect.reload());
})

// 将js文件生成之后再 生成

//将 模拟的json 文件 拷贝到 devPath prdPath中
gulp.task('json',function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.distPath + 'data'))
    .pipe(connect.reload());
});

//将 index.less 文件 拷贝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less', function () {
    gulp.src(app.srcPath+'style/index.less')
        .pipe(less())
        .pipe(cssmin())
        .pipe(gulp.dest(app.distPath + 'css'))
        .pipe(connect.reload());
})

// 拷贝 js 文件  将所有的源文件中的js 文件整合成index.js 然后拷贝过去
gulp.task('script',function(){
    return gulp.src(app.srcPath + 'js/**/*.js')
    .pipe(concat('index.js'))
    .pipe(gulp.dest(app.srcPath + 'js')) 
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(app.distPath + 'js'))
    .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
    .pipe(gulp.dest('./rev'))
    .pipe(connect.reload());    
});

//拷贝 压缩 图片 最后放到发布目录下
gulp.task('image',function(){
    gulp.src(app.srcPath + 'imgs/**/*.jpg')
    .pipe(gulp.dest(app.distPath + 'imgs'))
    .pipe(connect.reload());
});

//总的方法
// gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);
// gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);
// gulp.task('build', function (cb) {
//     runSequence('clean', 'image', 'script', 'html')(cb);
// });

gulp.task('build', ['image', 'html']);

//清除旧文件，每次更新的时候
gulp.task('clean',function(){
    gulp.src([app.distPath, './rev/'])
    .pipe(clean());
})

//编写服务
gulp.task('serve', ['build'], function() {
    connect.server({
        //服务起来的入口
        root: [app.distPath],
        //文件更改后自动刷新页面
        livereload: true,
        //端口号
        port: 1234
    });
    // 在 命令工具中执行 gulp serve  就相当于是启动了服务
    //自动打开浏览器
    open('http://localhost:1234/');
    //监听 script 下边的 js 文件，并执行 script 方法
    gulp.watch(app.srcPath + 'js/**/*.js', ['html']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
    gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
    gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
    gulp.watch(app.srcPath + 'imgs/**/*', ['image']);
    //这样文件变更了就会自动构建
});

//默认执行的任务，直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。
gulp.task('default', ['serve']);