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

Question

我正在尝试使用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文件之前显示,这在尝试加载Angular应用程序时会导致问题在加载任何相关资源之前需要app.js.同样地,对于最终以随机顺序组合的CSS资源,并且顺序再次有点重要 - 即.bootstrap需要在主题和任何自定义样式表之前加载.

如何设置连接过程以使订单保持不变？

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

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

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

Answer 1

对于像示例中的角度应用程序(以及它的依赖关系管理),我通常使用这种语法:gulp.src(['app\js\app.js', 'app\js\**\*.js']).

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

我看到了关于将加载文件顺序移动到构建脚本中的观点:我有同样的感觉,直到我开始使用gulp -inject在开发时注入index.html中的未分隔文件引用并注入捆绑,缩小和版本化的文件在生产索引文件中.在我的所有开发周期中使用该glob排序解决方案对我来说非常有意义,我不再考虑它了.

最后,这种"排序气味"的可能解决方案可能是使用browserify,但对我而言,它只是使角度应用程序的架构变得复杂:最后,正如您所说,您只需要在所有其他文件之前调用一个特定文件那些.