//ERRRORS SHOWN ON THE CONSOLE
main.lib.angular.js:1 Uncaught TypeError: Cannot read property 'noop' of undefined
main.lib.js:1 Uncaught TypeError: Cannot read property 'module' of undefined
main.user.js:1 Uncaught ReferenceError: angular is not defined
(index):52 Uncaught ReferenceError: angular is not defined
我正在为我的应用程序编写一个 Gulp 文件。该应用程序使用 AngularJS 及其库和一些其他库。但是,当我丑化 JS 文件并将所有库文件连接到一个文件并将所有用户定义的 JS 文件连接到一个文件时,我收到一条错误消息,指出 Angular 未定义。我保留了丑化连接文件的顺序,以便在编译过程中带有 Angular 库的文件首先出现。但是,由于除了 Angular.js 之前的 Angular.js 之外,还有更多的 Angular 文件,因此我收到错误。这个问题有解决办法吗?另外,如果我不连接 Angular 库文件并导入它们,我仍然会收到其他注入(inject)模块未定义的错误。这是我编写的 gulpfile.js:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
browserSync = require('browser-sync')
reload = browserSync.reload,
concat = require('gulp-concat')
cleanCSS = require('gulp-clean-css');
var dest = './dest/'
//Angular apps
gulp.task('script-lib-ang', function() {
gulp.src('./lib/angular/*.js')
.pipe(plumber())
.pipe(uglify({
mangle: false
}))
.pipe(concat('main.lib.angular.js'))
.pipe(gulp.dest(dest))
.pipe(reload({
stream: true
}));
});
//Task for all the library javascript files
gulp.task('script-lib', ['script-lib-ang'], function() {
gulp.src(['./lib/**/*.js', '!./lib/angular/*.js'])
.pipe(plumber())
.pipe(uglify({
mangle: false
}))
.pipe(concat('main.lib.js'))
.pipe(gulp.dest(dest))
.pipe(reload({
stream: true
}));
});
//Task for all custom js files developed by the user
gulp.task('script-user', ['script-lib'], function() {
gulp.src('./app/**/*.js')
.pipe(plumber())
.pipe(uglify({
mangle: false
}))
.pipe(concat('main.user.js'))
.pipe(gulp.dest(dest))
.pipe(reload({
stream: true
}));
});
// gulp.task('css-user', function() {
// gulp.src(['./css/**/*.css', '!./css/lib/*.css'])
// .pipe(plumber())
// .pipe(cleanCSS())
// .pipe(concat('css-user.css'))
// .pipe(gulp.dest(dest))
// .pipe(reload({stream : true}));
// });
gulp.task('css-lib', function() {
gulp.src('./css/**/*.css')
.pipe(plumber())
.pipe(cleanCSS())
.pipe(concat('css-lib.css'))
.pipe(gulp.dest(dest))
.pipe(reload({
stream: true
}));
});
gulp.task('browser-sync', function() {
browserSync({
proxy: 'localhost',
ui: false
});
});
gulp.task('watch', function() {
gulp.watch('./lib/angular/*.js', ['script-lib-ang']);
gulp.watch(['./lib/**/*.js', '!./lib/angular/*.js'], ['script-lib']);
gulp.watch('./app/**/*.js', ['script-user']);
gulp.watch('./css/**/*.css', ['css-lib']);
});
gulp.task('default', ['script-lib-ang', 'script-lib', 'script-user', 'css-lib', 'browser-sync', 'watch']);
最佳答案
如果您使用 Bower 进行客户端依赖项并使用像 main-bower-files 这样的 npm 包,它将按正确的顺序对所有库文件进行排序。为了实现项目的正确顺序,我将明确命名它们,例如 *.controler.js、*.module.js。这样您就可以使用扩展来确定顺序。
作为一个例子,我将声明一个具有正确文件顺序的变量,并且需要 main-bower-files 包,例如:
var mainBowerFiles = require('main-bower-files');
var jsFilesLocation: [
appRoot + '**/*.module.js',
appRoot + '**/*.config.js',
appRoot + '**/*.service.js',
appRoot + '**/*.controller.js',
appRoot + '**/*.js'
];
/*Now using the Jsfileslocation and the main-bower-files plugin my task will look like*/
gulp.task('inject-js', function () {
return gulp.src(config.indexHtmlFileLocation)
/* Inject bower references */
.pipe(plugins.inject(gulp.src(mainBowerFiles(), { read: false }),
/*Inject Code Files */
.pipe(plugins.inject(gulp.src(jsFilesLocation, { read: false }),
{ relative: true }))
.pipe(gulp.dest(destinationPath));
});
如果您遵循此模式,您应该不会遇到任何错误。以下是一篇关于如何改进 gulp 任务的精彩文章的链接:
http://www.johnpapa.net/angular-and-gulp/
谢谢你, 索玛。
关于javascript - Gulp 丑化文件中未定义 Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36930283/