问题描述
我的Angular
应用程序具有以下结构
MyAngular
application has the following structure
- src/app/main/
|
-main.js
-main.controller.js
-index.html
我正在使用Gulp.构建完成后,将以错误的顺序将*.js
文件注入到index.html
中.文件main.js
依赖于main.controller.js
,因此必须在main.js
之前插入main.controller.js
.
I'm using Gulp. After the build completes, the *.js
files are injected in the wrong order in index.html
. The file main.js
depends on main.controller.js
, so main.controller.js
has to be injected before main.js
.
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<script src="app/main/main.js"></script>
<script src="app/main/main.controller.js"></script>
<script src="app/index.js"></script>
<!-- endinject -->
这是我的gulpfile.js
'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var wrench = require('wrench');
var options = {
src: 'src',
dist: 'dist',
tmp: '.tmp',
e2e: 'e2e',
errorHandler: function(title) {
return function(err) {
gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
this.emit('end');
};
},
wiredep: {
directory: 'bower_components',
exclude: [/jquery/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/]
}
};
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file)(options);
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
推荐答案
我通过使用 gulp-natural-sort 和 stream-series 模块. gulp-natural-sort
以一致的顺序排列文件,而stream-series
提取多个文件流,一个放在另一个.
I fixed this problem by using the gulp-natural-sort and stream-series modules. gulp-natural-sort
orders your files in a consistent order and stream-series
takes multiple streams of files and places one before the other.
我的代码如下:
var series = require('stream-series');
var naturalSort = require('gulp-natural-sort');
gulp.task('inject', function() {
log('Injecting custom scripts to index.html');
var theseComeFirst = gulp.src(["somepath/first*.js", {read: false}).pipe(naturalSort());
var theseComeSecond = gulp.src("somepath/second*.js", {read: false}).pipe(naturalSort());
return gulp
.src("*.html")
.pipe($.plumber({errorHandler: handleError}))
.pipe($.inject(series(theseComeFirst, theseComeSecond), {relative: true}))
.pipe(gulp.dest('client/'));
});
您可以只使用流序列,只要您不关心其他序列是否正确即可.不幸的是,每次运行时,inject()都会将文件按某种随机顺序放入系列组中,这给了我heebee jeebees.
You could just use the stream-series, as long as you don't care if the others are in order or not. Unfortunately inject() will put the files in a series group in somewhat random order every time it runs, which gives me the heebee jeebees.
这篇关于如何使用Gulp订购注入的文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!