我是AngularJS的新手,正在创建一个使用Grunt构建的应用程序.
当我构建并运行我的应用程序时,我注意到与依赖项加载顺序相关的一些问题:
Uncaught Error: [$injector:nomod] Module 'mycompany.admin.forms' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.13/$injector/nomod?p0=mycompany.admin.forms
Run Code Online (Sandbox Code Playgroud)
在构建的app文件中,模块在声明之前正在使用:
angular.module('mycompany.admin.forms').controller('editController', ['$scope', function($scope) {
// ...
}]);
angular.module('mycompany.admin.forms', [])
.config(['$routeProvider', function($routeProvider) {
// ...
}]);
Run Code Online (Sandbox Code Playgroud)
以下是我项目的gruntfile.js中的相关片段:
grunt.initConfig({
distdir: 'build',
pkg: grunt.file.readJSON('package.json'),
src: {
js: ['src/**/*.js'],
},
concat: {
dist: {
src: ['<%= src.js %>', '<%= src.jsTpl %>'],
dest: '<%= distdir %>/admin/app.js'
}
} …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用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'));
Run Code Online (Sandbox Code Playgroud)
我得到一个带有这个的连接文件,但是组合输出文件中嵌入的javascript文件的顺序是随机的 - 在这种情况下,控制器在初始app.js文件之前显示,这在尝试加载Angular应用程序时会导致问题在加载任何相关资源之前需要app.js.同样地,对于最终以随机顺序组合的CSS资源,并且顺序再次有点重要 - 即.bootstrap需要在主题和任何自定义样式表之前加载.
如何设置连接过程以使订单保持不变?
更新 因此事实证明,DOES上面的排序实际上是通过在文件规范数组中明确指定文件顺序来实现的.所以在这种情况下,关键是首先列出app/js/app.js,然后让其余的脚本以任何顺序无关紧要.
我没有看到这种行为(Duh!)的原因是Gulp Watch正在运行并且gulpfile.js更新实际上没有反映在输出中.重新启动gulp确实更新了脚本.新手错误......
其他想法: 但仍然想知道 - 这是指定构建顺序的正确位置吗?现在看来你正在将应用程序逻辑(加载顺序)填充到构建脚本中,这感觉不对.还有其他方法可以解决这个问题吗?
我正在使用gulp-order模块以及event-streams模块和gulp-concat将javascript文件连接到单个dest文件中.gulp-order插件在我想要以不同顺序连接流中的文件的其他项目中对我很有用.由于某些原因,在这个项目中,它无法正常工作,并且public/angular/config目录中的文件分散在我指定的文件中,以便在public/js目录中最后连接.我认为这可能与指定多个来源有关.angular和js目录.我尝试将流与事件流模块合并而没有运气,而当我第一次开始时,我通过将数组传递给gulp.src函数来指定多个源
gulp.src(['./public/angular/**/*.js', './public/js/*.js'])
Run Code Online (Sandbox Code Playgroud)
下面是我现在使用的代码.管道和连接工作正常,但顺序不符合规范:
var gulp = require('gulp');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var handleErrors = require('../util/handleErrors');
var jshint = require('gulp-jshint');
var ngmin = require('gulp-ngmin');
var order = require('gulp-order');
var es = require('event-stream');
function getStream(streamPath) {
return gulp.src(streamPath);
};
gulp.task('scripts', function() {
return es.merge(getStream('./public/angular/**/*.js'),getStream('./public/js/*.js'))
.pipe(order([
'./public/angular/config/*.js',
'./public/angular/services/**/*.js',
'./public/angular/modules/**/*.js',
'./public/angular/primitives/**/*.js',
'./public/js/**/*.js'
]))
.pipe(concat('app.js'))
.pipe(gulp.dest('./public/build/js'))
.on('error', handleErrors);
});
Run Code Online (Sandbox Code Playgroud)