項(xiàng)目使用了
requirejs由于模塊的獨(dú)立帶來了文件過多的問題，導(dǎo)致加載頁面時(shí)會(huì)發(fā)起非常多的請(qǐng)求，影響了效率偎漫，因此考慮合并為一個(gè)文件蜻拨。備選方案有gulp+require-optimize，gulp+amd-optimize以及官方打包工具r.js蜕煌，最后選擇方案二
實(shí)現(xiàn)方法
安裝
npm install amd-optimize
gulpfile.js
...
var amdOptimize = require('amd-optimize'); //處理requirejs模塊
...
gulp.task('js', function () {
amdOptimize.src("js/app/home", {
"paths": {
"jquery": "assets/lib/jquery/jquery-1.11.3.min",
"util": "assets/common/util",
"constants": "js/common/constants",
'hdb': 'assets/lib/handlebars/handlebars',
"bootstrap": "assets/lib/bootstrap/bootstrap.min",
"ztree-core": "assets/lib/ztree/js/jquery.ztree.core",
"toast": "assets/lib/toastr/toastr.min",
},
baseUrl: "./"
})
.pipe(concat("index.js"))
.pipe(uglify())
.pipe(gulp.dest('dist/js/')) // 輸出文件
.pipe(rev.manifest()) // 生成一個(gè)rev-manifest.json
.pipe(gulp.dest('./rev')); // 將 rev-manifest.json 保存到 rev 目錄內(nèi)
});
遇到的問題
- 一開始使用的
require-optimize， 不太好用 - 在配置
amd-optimize的時(shí)候，開始使用的gulp.src導(dǎo)致了一些路徑問題蛉顽，
還配置了configFile字段也不好用 - 在使用
admOptimize.src的時(shí)候，也經(jīng)常出現(xiàn)某些依賴的某塊找不到的問題先较，
關(guān)鍵要在paths字段中指定這些依賴 -
amd-optimize貌似并不會(huì)混淆壓縮需要依賴concat插件和uglify插件
