Gulp uglified 文件中未定义 Angular

Question

//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 文件进行 uglify 并将所有库文件合并为一个并将所有用户定义的 JS 文件合并为一个时，我收到一条错误消息，提示未定义角度。我保留了 uglified-concatenated 文件的顺序，以便在编译过程中首先出现带有角度库的文件。但是，由于除了 angular.js 之前的 angular.js 之外还有更多的 angular 文件，我得到一个错误。这个问题有解决方案吗？此外，如果我不连接角度库文件并将它们导入，我仍然会收到未定义的其他注入模块的错误。这是我写的 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']);

Answer 1

我认为您需要在缩小之前使用gulp-ng-annotate 来管理所有连接的 angularjs 文件。这是连接和缩小所有 js 文件的任务示例：

gulp.task('scripts', function() {
  return gulp.src(config.development.js)
    .pipe(concat('app.js'))
    .pipe(ngannotate())
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(selectedConfig.ENV.name + '/dist/js'))
});

Answer 2

如果您将 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 taks 的精彩文章的链接：

http://www.johnpapa.net/angular-and-gulp/

谢谢你， 索玛。