[爬坑]关于angularJS的controller文件压缩的问题

本文主要是介绍[爬坑]关于angularJS的controller文件压缩的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

独自摸索最大的麻烦就是遇到奇怪的问题，比如我一下午都在爬一个坑，就是angularJS的controller文件用gulp打包压缩后网页上一直报错。期初还以为是angularJS的版本问题，傻逼比地翻墙去下载各种版本的angular.min.js文件，结果一个个试过去还是没把问题解决。最后还是无意中发现controller文件未打包前没有报错，而打包后就报“Unknown provider: eProvider <- e”错误，恍然大悟！

解决办法

方法一

controller一般书写时按照简写的格式：

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {  });

但是压缩js会破快AngularJS文件所需的依赖注入，以至于无法工作，因此压缩前你需要将代码手动修改为下面的形式：

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope,$timeout) { }]);

方法二

简单介绍下ng-annotate这个项目，它会自动帮你做这件事^_^，这个项目正好提供了gulp的插件。

gulp配置文件：

var gulp = require('gulp');  
var ngAnnotate = require('gulp-ng-annotate');  
var gutil = require('gulp-util');  
var bower = require('bower');  
var uglify = require('gulp-uglify');  
var concat = require('gulp-concat');  
var minifyCss = require('gulp-minify-css');  
var rename = require('gulp-rename');  
var sh = require('shelljs');  
var ngmin = require('gulp-ngmin');  //没错，就是她了。别忘了先用npm下载到node_modules目录然后添加到package.json里
var stripDebug = require('gulp-strip-debug');  gulp.task('minify', function() {  return gulp.src(['js/appService.js','js/app.js']) //注意，此处特意如此，避免顺序导致的问题.pipe(ngAnnotate()).pipe(ngmin({dynamic: false}))  .pipe(stripDebug())  .pipe(uglify({outSourceMap: false}))  .pipe(concat('all.min.js'))  .pipe(gulp.dest('js/'))  
});