gulp生成資源路徑(gulp-edit的使用)
阿新 • • 發佈:2019-02-06
專案中因為引入了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版本的外掛,很新,但是符合我的需求
下載專案:檢視效果