Question

我使用gulp构建app和gulp-angular-filesort，将脚本注入index.html文件。

项目结构如下：

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

让我们说module1使用module2。所以，我想在module1之前注入module2脚本。

modules.module.js内容：

agnular.module（＆＃39; app.modules＆＃39;，[＆＃39; app.modules.module2＆＃39;，＆＃39; app.modules.module1＆＃39;]）

modules.module1.js内容：

agnular.module（＆＃39; app.modules.module1＆＃39;，[＆＃39; app.modules.module2＆＃39;]）

modules.module2.js内容：

agnular.module（＆＃39; app.modules.module2＆＃39;，[]）

但无论如何脚本都以错误的顺序注入：module1首先是modul2。如何以正确的方式控制脚本顺序？

Answer 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的读取选项！此插件会分析每个文件的内容以确定排序顺序。”

这直接来自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 );
    } );

控制gulp-angular-filesort js命令

1 个答案: