Gulp - 如何使用 gulp-concat 控制处理顺序答案

【问题标题】：Gulp - How do I control processing order with gulp-concatGulp - 如何使用 gulp-concat 控制处理顺序
【发布时间】：2014-09-16 19:29:58
【问题描述】：

我正在尝试使用 gulp-concat 将组合的 JavaScript 和 CSS 资源生成到一个文件中：

var concatjs = gulp
    .src(['app/js/app.js','app/js/*Controller.js', 'app/js/*Service.js'])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'));

我得到了一个连接文件，但是嵌入在组合输出文件中的 javascript 文件的顺序是随机的 - 在这种情况下，控制器出现在初始 app.js 文件之前，这会在尝试加载时导致问题在加载任何相关资源之前需要 app.js 的 Angular 应用程序。同样，对于以随机顺序组合的 CSS 资源，顺序也很重要 - 即。 bootstrap 需要在主题和任何自定义样式表之前加载。

如何设置串联过程以保持订单不变？

更新所以事实证明，上述 DOES 的排序实际上是通过在文件规范数组中明确指定文件顺序来工作的。所以在这种情况下，关键是首先列出 app/js/app.js，然后让其余顺序无关紧要的脚本按任何顺序排列。

我没有看到这种行为的原因（Duh！）是 Gulp Watch 正在运行，而 gulpfile.js 更新实际上并未反映在输出中。重新启动 gulp 确实更新了脚本。新手错误...

其他想法： 不过仍然想知道 - 这是指定构建顺序的正确位置吗？看来您现在正在将应用程序逻辑（加载顺序）填充到构建脚本中，这感觉不对。还有其他方法可以解决这个问题吗？

【问题讨论】：

您是否尝试过按顺序给出文件名，而不是传递正则表达式来读取所有文件。
这看起来像一个类似的问题stackoverflow.com/questions/21961142/…
我的原始脚本包含明确的文件名，并且最初不起作用。事实证明，问题在于 gulp-watch 正在运行并且没有刷新 gulpfile.js 更改（呃！）。使用更新的文件重新运行确实尊重源文件规范顺序。谢谢！
你试过用 browserify 或者 requirejs 来处理你的 js 依赖吗？这样你就可以保持你的加载顺序独立于你的构建过程。

标签： angularjs gulp

【解决方案1】：

对于像您的示例中的 Angular 应用程序（以及依赖管理），我通常使用这种语法：gulp.src(['app\js\app.js', 'app\js\**\*.js'])。

如果您的 app.js 文件是按字母顺序排列的第一个文件，您也可以只使用 gulp.src('app\js\**\*.js')。

我明白你关于将加载文件顺序移动到构建脚本中的观点：直到我开始使用 gulp-inject 在开发时在我的 index.html 中注入未缩小的文件引用并注入捆绑的、缩小的文件之前，我都有同样的感觉和生产索引文件中的版本。在我的整个开发周期中使用该全局排序解决方案对我来说非常有意义，以至于我不再考虑它了。

最后，可以使用browserify 来解决这种“订购气味”的可能解决方案，但对我来说，这只是使 Angular 应用程序的架构复杂化：最后，正如您所说，您只需要一个特定文件是在所有其他人之前调用。

【讨论】：

【解决方案2】：

对于我的 js，我使用了一种特殊的结构/命名约定，这会有所帮助。我按功能将其拆分为目录，然后将每个“功能”视为一个单独的封装模块。

所以对于我的项目，

app/js/

    - app.js
    - app.routes.js
    - app.config.js

    /core/

        - core.js
        - core.controllers.js
        - core.services.js

        /test/

           - .spec.js test files for module here

    /feature1/

        - feature1.js
        - feature1.controllers.js

    /feature2/

        - feature2.js
        - feature2.controllers.js

    ...

因此，每个目录都有一个同名文件，其中仅包含初始模块定义，这就是 app.js 对整个应用程序的全部内容。所以对于feature1.js

angular.module('feature1', [])

然后模块中的后续文件检索模块并向其添加内容（控制器/服务/工厂等）。

angular.module('feature1')
       .controller(....)

不管怎样，我会开门见山的……

由于我有一个预定义的结构，并且知道每个模块必须先处理一个特定的文件，我可以使用下面的函数将所有内容按顺序排序，然后再由 gulp 处理。

这个函数依赖于npm install file和npm install path

function getModules(src, app, ignore) {

    var modules = [];

    file.walkSync(src, function(dirPath, dirs, files) {

        if(files.length < 1)
            return;

        var dir = path.basename(dirPath)
            module;

        if(ignore.indexOf(dir) === -1) {
            module = dirPath === src ? app : dir;

            files = files.sort(function(a, b) {
                return path.basename(a, '.js') === module ? -1 : 1;
            })
            .filter(function(value) {
                return value.indexOf('.') !== 0;
            })
            .map(function(value) {
                return path.join(dirPath, value);
            })

            modules = modules.concat(files);
        }
    })

    return modules;
}

它遍历传递给它的目录结构，从每个目录（或模块）中获取文件并将它们按正确的顺序排序，确保模块定义文件始终位于第一位。它还会忽略出现在 'ignore' 数组中的所有目录，并删除所有以 '.' 开头的隐藏文件

用法是，

getModules(src, appName, ignoreDirs);

src 是你想要递归的目录
appName 是您的 app.js 文件的名称 - 所以是“app”
ignoreDirs 是您要忽略的目录名称数组

所以

getModules('app/js', 'app', ['test']);

它会以正确的顺序返回应用中所有文件的数组，然后您可以像这样使用它：

gulp.task('scripts', function() {
    var modules = getModules('app/js', 'app', ['test']);

    return gulp.src(modules)
               .pipe(concat('app.js'))
               .pipe(gulp.dest('build'));
});

【讨论】：