如何使用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]); 
});