gulp生成資源路徑（gulp-edit的使用）

項目中因爲引入了lazyload做懶加載，就需要配置一些常量來放置資源的路徑（如下圖），之前都是手填的，易錯且麻煩，既然項目中引入了gulp就要利用起來。

通過gulp-inject可以篩選出項目路徑，並且以數組的形式插入到目標位置，在用gulp-edit來編輯這個數組，就能以key-value的形式插入到常量配置中。

var gulp = require('gulp');
var inject = require('gulp-inject');
var edit = require('gulp-edit');

gulp.task('injectIntoJs',function(){
     return gulp.src('files.js')
      .pipe(inject(gulp.src(['webpage/**/*.js'], {read: false}), {
        starttag: '/*inject:begin*/',
        endtag: '/*inject:end*/',
        transform: function (filepath, file, i, length) {
          return '  "' + filepath + '"' + (i + 1 < length ? ',' : '');
        }
      }))
      .pipe(gulp.dest('./'));
});


gulp.task('edit',['injectIntoJs'], function() {
  return gulp.src('files.js')
    .pipe(edit(function(src, cb){
      // this === file 
      var startIndex=src.indexOf('/*inject:begin*/');
      var endIndex=src.indexOf('/*inject:end*/');
      var front=src.substring(0,startIndex+16);
      var back=src.substring(endIndex);
      console.log('開始位置',startIndex,'結束位置',endIndex);
      //+16是爲了剔除  開始tag
      var target=src.substring(startIndex+16,endIndex);
      // 去掉換行符和空格,引號也刪掉（命名中不能有空格）
      var newTar=target.replace(/\s/g,'');
       // console.log(newTar);

      var arr=newTar.split(",");
       // console.log(arr);
      var obj={};
      arr.forEach(function(value,index,array){
            var temp=value.split('/');
             // console.log(temp);
             temp.splice(0,2)
             temp.splice(temp.length-1);
             var key=temp.join("-")
            if(!obj[key]){
                obj[key]=[];
            }
            obj[key].push(value);
        })
      var str='';
      for(key in obj){
        str=str+"'"+key+"':";
        str=str+"["+obj[key]+"],\n";
      }
      src=front+"\n"+str+"\n"+back;
      console.log(src)


      var err = null
      cb(err, src)
    }))
    .pipe(gulp.dest('./'))
})


gulp.task('default', ['edit']);

我這裏是按文件夾結構來做key值，根據需求修改task就好。

gulp-edit
我這裏首先根據gulp-inject可以生成如下圖的資源路徑。

只需要經過一些編輯，就可以達到我想要的那種結構。百度了好半天，出來的沒一個靠譜的，google一下，第一個就是gulp-edit，它是專門用來編輯file，無論什麼格式文件，都作爲字符串來編輯。
這是個o.o.1版本的插件，很新，但是符合我的需求

下載項目：查看效果