使用多个独立的gulpfile来构建不同的bundle

Question

这里是情景。

让我们说我是一个内部有不同子应用程序的主应用程序（或symfony世界中的捆绑包）。每个应用程序都有自己的脚本和样式，独立于另一个。这些子应用程序应该尽可能少地耦合，因为它们可以随时更新或者可以随时删除。

应用-DIR

• style（main-app）
• 脚本（主应用）

• subapps

  • APP1
    • 式
    • 脚本
    • gulpfile.js
  • APP2
    • 式
    • 脚本
    • gulpfile.js

• dist（目标

  • maincss.css（mainapp）
  • mainjs.js（mainapp）
  • subapp1
    • style.css（app1 style）
    • script.js（app1 js） .....
• gulpfiles.js

每个gulpfile应该是自我关注的，因为它们可以有不同的构建要求（更少或简单，缩小或不缩小，....）

我正在尝试实现一个sceanrio，其中主gulpfile使用目标目录调用所有subapp gulpfiles。每个sub-gulpfile生成它的文件并将其复制到目标目录。

你能告诉我一个很好的方法吗？

我找到了突变（https://www.npmjs.com/package/gulp-chug）但是当我一起读书时，我发现这是一个不正确的讨论。

我无法找到满足我黑盒子方法的要求。

THX

Answer 1

你可以尝试这样的事情，或者至少会指出你正确的方向：

main gulpfile.js

require('./gulp');
require('./app1/gulp');
require('./app2/gulp');

你的gulp文件夹看起来像这样

• 吞
  • 任务
    • task1.js
    • task2.js
  • index.js

index.js将需要您的任务，这些任务可以特定于每个应用程序

var fs = require('fs');
var path = require('path');

var onlyScripts = function(name) {
                     return /(\.(js)$)/i.test(path.extname(name));
                  };

var tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);

tasks.forEach(function(task) {
  require('./tasks/' + task);
});

任务文件夹

中作为任务的示例

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var browserSync  = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function () {

  return gulp.src([src-of-this-app])
    .pipe(sass({
      sourceComments: 'map',
      sourceMap: 'sass',
      outputStyle: 'nested'
    }))
    .pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
    .pipe(gulp.dest([dest-of-this-app]))
    .pipe(gulpif(browserSync.active, browserSync.reload({ stream: true })));

});

这样您可以将任务分成每个应用程序的不同文件夹