记录gulp学习过程

罗列一些自己初学时参考的文章，以记录自己学习的过程

• gulp详细入门教程
  区分全局安装和项目中本地安装

• 前端构建工具gulpjs的使用介绍及技巧
  常用插件的介绍与4个API的应用：

gulp.task()
gulp.src()
gulp.dest()
gulp.watch()

• Gulp解决发布线上文件(CSS和JS)缓存问题
  使用MD5重新命名文件

• Gulp自动添加版本号
  文件命名格式：bootstrap.min.css?v=2af420b273

  需修改以下三处：

  1. 打开node_modules\gulp-rev\index.js 第133行

  manifest[originalFile] = revisionedFile; 
  

  更新为:

  manifest[originalFile] = originalFile + '?v=' + file.revHash;
  

  2. 打开node_modules\gulp-rev\node_modules\rev-path\index.js第10行

  return filename + '-' + hash + ext;
  

  更新为:

  return filename + ext;
  

  3. 打开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添加版本号
  解决以上版本号会重复追加到链接后面的问题

  打开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:true

    gulp.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文件里面

  网上blog都只写了merge：true，测试了一下发现不行，参照github加上了path才可以，还是要多参照github

  .pipe(rev.manifest({ 
        path: 'rev-manifest.json',     
        merge: true                
   }))
  

• 用gulp做一个略完整的前端打包工作~
  循环出多个task

根据以上文章，构建针对自己前端工程的gulp，附上github工程链接：https://github.com/laoruiwen/FogUI

问题更新

• gulp-uglify不兼容IE8
  1. 卸载插件

  npm uninstall gulp-uglify [-g] [--save-dev]
  

  2. 安装gulp-uglify1.5.4版本

  npm install --save-dev [email protected]
  

• 提示该文件夹包含名称过长无法删除node_modules文件夹
  1. 安装rimraf

  npm install rimraf -g
  

  2. 删除node_modules

  rimraf node_modules