hugh 的个人博客

gulp进行requireJs 单页应用构建

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/'));    //- 替换后的文件输出的目录

});


标题:gulp进行requireJs 单页应用构建
作者:hugh0524
地址:https://blog.uproject.cn/articles/2017/08/10/1502357582790.html