我的Angular
应用程序具有以下结构
- src/app/main/
|
-main.js
-main.controller.js
-index.html
我正在使用 Gulp。构建完成后,*.js
文件以错误的顺序注入(inject)到 index.html
中。文件main.js
依赖于main.controller.js
,所以main.controller.js
必须在main 之前注入(inject)。 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');
});
最佳答案
在你的 inject.js 中使用 gulp-angular-filesort
https://www.npmjs.com/package/gulp-angular-filesort
To work correctly, each angular file needs to have a uniquely named module and setter syntax (with the brackets), i.e. angular.module('myModule', []).
示例注入(inject).js:
module.exports = function(options) {
gulp.task('inject', ['scripts', 'styles'], function () {
var injectStyles = gulp.src([
options.tmp + '/serve/app/**/*.css',
'!' + options.tmp + '/serve/app/vendor.css'
], { read: false });
var injectScripts = gulp.src([
options.src + '/app/**/*.js',
'!' + options.src + '/app/**/*.spec.js',
'!' + options.src + '/app/**/*.mock.js'
])
.pipe($.angularFilesort()).on('error', options.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath: [options.src, options.tmp + '/serve'],
addRootSlash: false
};
return gulp.src(options.src + '/*.html')
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(options.wiredep))
.pipe(gulp.dest(options.tmp + '/serve'));
});
};
关于javascript - 如何使用 Gulp 订购注入(inject)的文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30841507/