控制 gulp-angular-filesort js 顺序答案

【问题标题】：Control gulp-angular-filesort js order控制 gulp-angular-filesort js 顺序
【发布时间】：2016-01-11 17:45:55
【问题描述】：

我正在使用 gulp 构建应用程序和 gulp-angular-filesort 将脚本注入 index.html 文件。

项目结构如下：

app
  |_modules
          |_module1
                   |_module1.module.js
                   |_module1.controllers.js 
          |_module2
                   |_module2.module.js
                   |_module2.controllers.js 
          |_modules.module.js

假设模块 1 使用模块 2。所以，我想在 module1 之前注入 module2 脚本。

modules.module.js 内容：

agnular.module('app.modules', ['app.modules.module2', 'app.modules.module1'])

modules.module1.js 内容：

agnular.module('app.modules.module1', ['app.modules.module2'])

modules.module2.js 内容：

agnular.module('app.modules.module2', [])

但无论如何，脚本的注入顺序是错误的：首先是模块 1，然后是模块 2。如何以正确的方式控制脚本顺序？

【问题讨论】：

注入文件的 gulp 任务是什么样的？设置为 false 的读取选项可能会导致问题，如果您正在使用它？您在上面的代码中也有一个错字：“agnular”应该是“angular”

标签： angularjs gulp

【解决方案1】：

虽然 gulp-angular-filesort 的基本用法很明显，但我还是将它与我使用的一些偏差一起发布在这里。

var angularFilesort = require('gulp-angular-filesort'),
    inject = require('gulp-inject');

gulp.src('./src/app/index.html')
    .pipe(inject(
        gulp.src(['./src/app/**/*.js']).pipe(angularFilesort())
    ))
    .pipe(gulp.dest('./build'));

“注意不要对 gulp.src 使用 read 选项！此插件会分析每个文件的内容以确定排序顺序。”

这是直接取自https://www.npmjs.com/package/gulp-angular-filesort

以下示例使用流。我收集不同的 js 流（例如来自 bower 组件、我自己的角度文件等）并对角度文件进行排序。

streams.applicationJS = function () {
    return gulp.src( src + "/js/**/*.js", {base: src} );
};

...

var libsAndAppJs = series( 
    streams.bowerFiles(), 
    streams.applicationJS().pipe( angularFilesort() ) 
);

var allIndex = gulp
    .src( src + "/htdocs/*/index.html", {base: src + "/htdocs"} )
    .pipe( inject( libsAndAppJs,
        {
            ignorePath: srcPrefix, addPrefix: "/directory"
        } ) );

还有一个稍微不同的例子：

var jsFiles = gulp.src( "**/*.js", { "cwd": src + "/js" } )
    .pipe( rename( function ( path ) {
        path.dirname = "/dir/js/" + path.dirname;
    } ) )
    .pipe( angularFilesort() );

...

return gulp.src( indexFile )
    .pipe( inject( series( vendorJsFiles, jsFiles, vendorCssFiles, cssFiles ),
        {
            ignorePath: "bower_components",
            addSuffix: "?" + new Date().getTime()
        } ) )
    .pipe( gulp.dest( dest ) )
    .on( "error", function ( err ) {
        console.log( err.message );
    } );

【讨论】：