Gulp合并requirejs并MD5文件
来源:互联网 发布:软件看门狗程序 编辑:程序博客网 时间:2024/05/15 23:48
项目目录结构
可以从https://github.com/muchstudy/GulpDemo 这里下载样例代码,求Star!
说明:
1. js的的依赖关系为main.build.js
–>three.js
–>two.js
–>one.js
2. main-build.js
为构建的入口
3. 从github上拿下来的项目是可以直接运行的。可执行gulp clean
与gulp
观察结果。
文件合并
- 在requirejs目录下运行
npm init
,初始化package.json - 运行
npm install gulp --save-dev
、npm install gulp-requirejs-optimize --save-dev
、`npm install gulp-rename --save-dev
文件合并代码如下:
var gulp = require('gulp');var reqOptimize = require('gulp-requirejs-optimize'); //- requireJs文件合并所需模块,选择该模块的原因为相对于其它模块活跃度较高var rename = require("gulp-rename"); //- 文件重命名gulp.task("optimize",function () { gulp.src("app/main-build.js") .pipe(reqOptimize({ optimize:"none", //- none为不压缩资源 //findNestedDependencies: true, //- 解析嵌套中的require paths:{ "PDAppDir":"", //- 所有文件的路径都相对于main-build.js,所以这里为空即可 "jquery":"empty:" } })) .pipe(rename("main.min.js")) .pipe(gulp.dest('app')); //- 映射文件输出目录});
说明:
1. 运行gulp optimize
即可把main-build.js
所依赖的文件合并到main.min.js
中。
2. 在代码中有一个findNestedDependencies
参数,意思是代码中如果是使用require
方式而不是define
方式依赖文件,默认不解析
3. :empty
代表忽略该文件
4. reqOptimize的详细参数见requirejs的官方文档
文件md5
运行:npm install gulp-rev --save-dev
MD5
文件MD5代码如下:
gulp.task("md5",function (cb) { gulp.src("app/main-build.js") .pipe(reqOptimize({ optimize:"none", //- none为不压缩资源 //findNestedDependencies: true, //- 解析嵌套中的require paths:{ "PDAppDir":"", //- 所有文件的路径都相对于main-build.js,所以这里为空即可 "jquery":"empty:" } })) .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest("app")) //- 生成MD5后的文件 .pipe(rev.manifest({merge:true})) //- 生成一个rev-manifest.json .pipe(gulp.dest('')) //- 映射文件输出目录 .on('end', cb);});
运行gulp md5
,此时就会生成类似于这样的文件main-min-c144065c18.js
。现在问题就来了,文件名变了,就需要动态替换首页上的引用文件名。
路径替换
运行:mpn install gulp-rev-collector --save-dev
、npm install through2 --save-dev
代码如下:
function modify(modifier) { return through2.obj(function(file, encoding, done) { var content = modifier(String(file.contents)); file.contents = new Buffer(content); this.push(file); done(); });}function replaceSuffix(data) { return data.replace(/\.js/gmi, "");}//去掉.js后缀,因为requirejs的引用一般都不带后缀gulp.task("replaceSuffix",function (cb) { gulp.src(['rev-manifest.json']) .pipe(modify(replaceSuffix)) //- 去掉.js后缀 .pipe(gulp.dest('')) .on('end', cb);});gulp.task("replaceHomePath",function (cb) { gulp.src(['rev-manifest.json', 'index-build.html']) .pipe(revCollector()) //- 替换为MD5后的文件名 .pipe(rename("index.html")) .pipe(gulp.dest('')) .on('end', cb);});
依次运行gulp replaceSuffix
、gulp replaceHomePath
即可生成可运行的首页。相对于原始首页,依赖的文件路径为md5后的路径。
整合
从上面可以看到,这一套下来需要运行一系列的task,而且这些task的运行还有先后顺序。下面尝试使用一个task来完成整个任务。由于gulp的task都是异步运行的,所以需要使用到run-sequence
安装npm install gulp-clean --save-dev
、npm install run-sequence --save-dev
//删除掉上一次构建时创建的资源gulp.task("clean",function () { return gulp.src([ 'rev-manifest.json', '**/*-build-*.js', 'index.html' ]).pipe(clean());});//构建总入口gulp.task('default', function(callback) { runSequence( "clean", //- 上一次构建的结果清空 "md5", //- 文件合并与md5 "replaceSuffix", //- 替换.js后缀 "replaceHomePath", //- 首页路径替换为md5后的路径 callback);});
说明:
1. 可以看到上面的task中最后都有一句.on('end', cb)
这个是为了解决task任务异步运行的问题
2. 此时,只需要运行gulp
即可完成所有的构建任务。
- Gulp合并requirejs并MD5文件
- gulp CSS合并、压缩与MD5命名及路径替换
- gulp下静态资源的合并、压缩、MD5后缀
- gulp教程之 gulp-concat(合并文件)
- 使用gulp-concat合并js文件
- gulp JS文件合并和压缩
- requirejs加载文件带上md5版本号的解决方案
- RequireJS对文件合并与压缩实现方法
- gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
- gulp系列之 静态资源打包压缩合并MD5版本控制
- gulp-content-includer--合并按模块引入的html文件
- gulp篇:速玩JS文件合并和压缩
- 写 gulp requirejs 编译流程的笔记
- 使用gulp自动优化requireJS项目
- Grunt、Gulp区别 webpack、 requirejs区别
- gulp、requirejs、webpack之间是什么关系
- Gulp编译、合并、压缩
- linux合并文件并替换
- 招不到人?筛简历要有方法!
- 机房收费系统之问题记录(2)
- View和ViewGroup
- 201604-1 试题名称:折点计数(100分)ccf认证
- Java 9:装B之前你必须要会的——泛型,注解,反射
- Gulp合并requirejs并MD5文件
- Android中如何实现圆形按钮的颜色变化
- 剑指offer——面试题41:和为s的两个数字VS和为s的连续正数序列
- 解决:Dagger2使用过程中的"程序包javax.annotation不存在"错误
- 用CI框架写了简单的pdo单例类
- struts学习总结
- 201512-1 试题名称:数位之和(100分)ccf认证
- 这些年、我收集的JQuery代码
- 文章标题