1、安装gulp

gulp使用

 

2、代码结构

 

3、目标及步骤

将使用app.js、app目录中的内容打包到一个js，并使用版本控制

1）选择需要的插件

合并文件(gulp-concat)、压缩js(gulp-uglify)、清除目录(gulp-clean)、版本控制（gulp-rev）、requireJs打包插件（amd-optimize）

2) 创建Task

① 压缩js   gulp.src 目录以gulpfile所在目录为准

gulp.task('minJs',function () {
return gulp.src("static/js/**/*.js")

.pipe(amdOptimize.src("app",{

configFile:"static/js/config.js",

baseUrl:"static/js" //作用 指定了加载js的baseUrl， src第一个参数就会使用到给url,js内部依赖的模板同样使用该url

}))

.pipe(concatFile("app.min.js"))

.pipe(uglifyJS())

.pipe(gulp.dest("static/js/dist"))
});

② 对压缩后的app.min.js 加指纹

gulp.task("version",['minJs'],function () {
    return gulp.src("static/js/dist/*.js")
        .pipe(rev({merge:true}))
        .pipe(gulp.dest("static/js/dist"))
        .pipe(rev.manifest())//生成一个 json 映射文件及其版本
        .pipe(gulp.dest('static/js/dist/rev'))
})

rev-manifest.json文件

③ 更改html内对该js的引用

gulp.task('build',['version'], function() {
    // 替换html
    gulp.src(['static/js/dist/rev/*.json', 'pages/index_source.html'])        //- 读取 rev-manifest.json 文件以及需要进行替换的文件
        .pipe(revCollector())                               //- 执行文件内 的替换
        .pipe(concatFile("index.html"))
        .pipe(gulp.dest('pages/'));    //- 替换后的文件输出的目录
});