使用多个独立的 gulp 文件构建不同的 bundle

Question

这是场景。

假设我有一个主应用程序，里面有不同的子应用程序（或 symfony 世界中的捆绑包）。每个应用程序都有自己的脚本和样式，相互独立。这些子应用程序应尽可能减少耦合，因为它们会越来越多，或者可以随时删除。

应用目录

• 风格（主应用）
• 脚本（主应用）

• 子应用程序

  • app1
    • 风格
    • 脚本
    • gulpfile.js
  • app2
    • 风格
    • 脚本
    • gulpfile.js

• 距离（目标

  • maincss.css（主应用程序）
  • mainjs.js（主应用程序）
  • 子应用程序 1
    • style.css（app1 样式）
    • script.js (app1 js) .....
• gulpfiles.js

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

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

你能告诉我一个很好的方法来完成这个吗？

我找到了 chug (https://www.npmjs.com/package/gulp-chug)，但是当我继续阅读时，我发现有人讨论说这不是正确的方法。

我找不到满足我的黑盒方法的 require 方法。

感谢

Answer 1

您可以尝试这样的操作，或者至少它会为您指明正确的方向：

主要gulpfile.js

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

您的 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);
});

任务文件夹中的 as 任务示例

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

});

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