gulp - 如何使用gulp将不同的js文件组织在不同的html中？

Question

如何使用gulp将不同的js文件组织在不同的html中？
我能做的唯一方法是将每个页面定义为 gulp 任务吗？还是 gulp 有更好的方法可以自动检测文件？

这是我下面的情况。
我有两个 html 'index.html','content.html'

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

还有我的 gulp 文件：

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]);
});