javascript - 使用多个独立的 gulp 文件构建不同的包

Question

这是场景。

假设我有一个主应用程序，其中包含不同的子应用程序(或 symfony 世界中的 bundle )。每个应用程序都有自己的脚本和样式，彼此独立。这些子应用程序应尽可能减少耦合，因为它们会不断出现或随时被删除。

应用程序目录

• 样式(主应用)
• 脚本(主应用程序)

• 子应用

  • 应用程序1
    • 风格
    • 脚本
    • gulpfile.js
  • 应用程序2
    • 风格
    • 脚本
    • gulpfile.js

• 距离(目标

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

每个 gulpfile 都应该 self 关注，因为它们可能有不同的构建要求(更少或简单，缩小或不缩小，......)

我正在尝试实现一个场景，其中主 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);
});

任务文件夹内的任务示例

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

});

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