如何使用gulp組織不同html中的不同js文件？

Question

如何使用gulp在不同的html中組織不同的js文件？
我能做的唯一方法就是定義每個頁面來吞噬任務？或者有更好的方法可以自動檢測文件？

這是我的情況如下。
我有兩個HTML '的index.html'， 'content.html'

• index.html需要plugin_A.js
• content.html需要plugin_B.js

而且我一飲而盡文件：

gulp.task('index_concat', function() { 
    return gulp.src('./app/js/plugin_A.js') 
     .pipe(concat('index.js')) 
     .pipe(gulp.dest('./build/js/')); 
}); 
gulp.task('content_concat', function() { 
    return gulp.src('./app/js/plugin_B.js') 
     .pipe(concat('content.js')) 
     .pipe(gulp.dest('./build/js/')); 
}); 

如果我有100頁，任務太大了！ 我認爲這是一個愚蠢的方式來定義每一頁，但我不知道如何變得更好。請給我一些建議。

Answer 1

您可以使用一些名稱約定爲您的插件，如pluginName_index.js和pluginName_content.js。所以你可以這樣做：

function yourFunction(pluginName,targetName){ 
    return gulp.src('./app/js/'+pluginName) 
     .pipe(concat(targetName)) 
     .pipe(gulp.dest('./build/js/')); 
} 

fs.readdirSync('.app/js/pluginFolder') 
.filter(function(fileName) { 
    var fileNameParts = fileName.split('_'); 
    yourFunction(fileName,fileNameParts[1]); 
});