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

【问题标题】：How to use gulp to organize the different js file in different html?如何使用gulp将不同的js文件组织在不同的html中？
【发布时间】：2015-11-08 15:06:13
【问题描述】：

如何使用gulp来组织不同html中不同的js文件？
我能做的唯一方法是将每个页面定义为 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 页，任务就太大了！！！我认为这是定义每个页面的愚蠢方式，但我不知道如何变得更好。请给我一些建议。

【问题讨论】：

标签： gulp organized

【解决方案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]);
});

【讨论】：