羅列一些自己初學(xué)時參考的文章酣衷，以記錄自己學(xué)習(xí)的過程
gulp詳細入門教程
區(qū)分全局安裝和項目中本地安裝前端構(gòu)建工具gulpjs的使用介紹及技巧
常用插件的介紹與4個API的應(yīng)用：
gulp.task()
gulp.src()
gulp.dest()
gulp.watch()
Gulp解決發(fā)布線上文件(CSS和JS)緩存問題
使用MD5重新命名文件-
Gulp自動添加版本號
文件命名格式：bootstrap.min.css?v=2af420b273需修改以下三處：
- 打開
node_modules\gulp-rev\index.js第133行
manifest[originalFile] = revisionedFile;更新為:
manifest[originalFile] = originalFile + '?v=' + file.revHash;- 打開
node_modules\gulp-rev\node_modules\rev-path\index.js第10行
return filename + '-' + hash + ext;更新為:
return filename + ext;- 打開
node_modules\gulp-rev-collector\index.js第31行
if (path.basename(json[key]).replace( new RegExp( opts.revSuffix ),'') !== path.basename(key) ){更新為:
if (path.basename( json[key]).split('?')[0] !== path.basename(key) ){ - 打開
-
使用gulp添加版本號
解決以上版本號會重復(fù)追加到鏈接后面的問題打開
node_modules\gulp-rev-collector\index.js修改以下兩處：function escPathPattern(pattern) { var rp = pattern.replace(/[-[]{}()*+?.^$|/\]/g, "\$&"); rp = pattern + "(\? v=(\d|[a-z]){8,10})*"; return rp; }if (opts.replaceReved) { patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key))) + path.basename(key, path.extname(key))) + opts.revSuffix + escPathPattern(path.extname(key)) + "(\?v=(\d|[a-z]){8,10})*" ); }加上
replaceReved:truegulp.task('rev', function() { return gulp.src(['./rev/*.json', './dist/index.html']) .pipe(revCollector({ replaceReved:true; })) .pipe(gulp.dest('./dist')); }); -
github gulp-rev
css文件和js文件版本號寫在一個rev-manifest.json文件里面網(wǎng)上blog都只寫了
merge：true席爽，測試了一下發(fā)現(xiàn)不行啊片，參照github加上了path才可以，還是要多參照github.pipe(rev.manifest({ path: 'rev-manifest.json', merge: true })) 用gulp做一個略完整的前端打包工作~
循環(huán)出多個task
根據(jù)以上文章齐饮，構(gòu)建針對自己前端工程的gulp笤昨，附上github工程鏈接：https://github.com/laoruiwen/FogUI
問題更新
- gulp-uglify不兼容IE8
- 卸載插件
npm uninstall gulp-uglify [-g] [--save-dev]- 安裝
gulp-uglify1.5.4版本
npm install --save-dev gulp-uglify@1.5.4 - 提示該文件夾包含名稱過長無法刪除
node_modules文件夾- 安裝
rimraf
npm install rimraf -g- 刪除
node_modules
rimraf node_modules - 安裝
