这里说一下angular代码配合gulp的打包流程，首先要下载gulp，使用npm全局安装。当然要配合node.js使用。

这里说下打包的问题。

刚开始是打算将所有代码打包到一起，经过一番努力之后终于打包完成，但是我发现了一个严重的问题，那就是打包到一起的代码并不能很好的运行(页面直接炸掉了)，后来找到了原因，是因为我把所有的html代码打包到一起之后破坏了原有Controller和congig中的引用路劲，所有导致了页面的无法加载，这是必然结果。好吧，既然找到了原因，那就只有采用第二种方案了，那就只有分开打包了。

• 第一步：
  先将所有的js打包到一起，因为之前的写法并没有按照打包的要求来写，所以在打包js的过程中其实也有一些困难(本来是打算改写所有的js文件)后来在广大网友的帮助下找到了一款“神器”，（gulp-ng-annotate）主要就是用来解决代码压缩中angular中依赖注入的问题，（通俗的将就是在打包过程中会将函数名或参数替换掉，而在angular中一旦参数被替换掉会报错，所以才有了这个工具），写到这里我不禁要感叹人类的伟大。呃…废话有点多了，貌似，终于将js代码打包到了一起，经过初步运行，没有问题。

• 第二步：
  接下来再打包css，一样的结果，当所有的css代码打包到一起之后页面混乱了，(可能是有变量名重复的情况出现吧)，同样采用分开打包的方式将所有的css代码打包完成，初步运行，可以使用。

• 第三步：
  打包html代码，依然是分开打包，(中间也出了些小问题，最后检查的结果是页面中有的地方增加或减少了一个”号所致，所以说代码还是要写规范的好啊)。

好接下来正式步入正题。

第一步：安装node.js(自带npm)，安装完成后。

第二步：使用npm -v和node -v检查是否有版本号出现，有的话证明安装成功。

第三步：全局安装gulp，使用命令npm install gulp -g全局安装。

第四步：在项目文件夹使用npm init创建package.json文件用来记录安装文件，方便团队使用。

第五步:局部安装gulp，使用命令npm install gulp --save-dev。

第六步:安装其它架包。

第七步:所有包都安装完成后，新建gulpfile.js文件。就可以写打包代码了。

• 这里是package.json文件

{"name": "gulp","version": "1.0.0","description": "","main": "index.js","scripts": {},"repository": {"type": "git"},"author": "","license": "ISC","devDependencies": {"gulp": "^3.9.1","gulp-autoprefixer": "^3.1.0","gulp-clean-css": "^2.0.10","gulp-concat": "^2.6.0","gulp-css-spriter": "^0.3.3","gulp-htmlmin": "^2.0.0","gulp-imagemin": "^3.0.1","gulp-jshint": "^2.0.1","gulp-livereload": "^3.8.1","gulp-minify-css": "^1.2.4","gulp-ng-annotate": "^2.0.0","gulp-ngmin": "^0.3.0","gulp-notify": "^2.2.0","gulp-rename": "^1.2.2","gulp-rev-append": "^0.1.6","gulp-sass": "^2.3.2","gulp-uglify": "^1.5.4","imagemin-pngcrush": "^5.0.0","jshint": "^2.9.2"}
}

• 这里是gulp.file文件

var gulp = require("gulp"),//gulp基础包rename = require("gulp-rename"),//重命名uglify = require("gulp-uglify"),//压缩jsngmin = require('gulp-ngmin'),//angular依赖ngAnnotate = require('gulp-ng-annotate'),//angular依赖minifycss = require("gulp-minify-css"),//压缩csshtmlmin = require('gulp-htmlmin'),//html压缩imagemin = require('gulp-imagemin'),//图片压缩pngcrush = require('imagemin-pngcrush'),concat = require("gulp-concat"),//合并jshint = require('gulp-jshint'),//js检测autoprefixer = require('gulp-autoprefixer'),//补充前缀rev = require('gulp-rev-append'),//版本号自动更新notify = require('gulp-notify');//提示信息// 检查js
gulp.task('jslint', function () {
return gulp.src('js/**/*.js').pipe(jshint()).pipe(jshint.reporter('default')).pipe(notify({message: 'jslint task ok'}));
});//合并压缩js代码
gulp.task('minifyjs', function () {
var jsOption = {compress: true//类型：Boolean 默认：true 是否完全压缩// preserveComments: 'all' //保留所有注释}//排除混淆关键字
};
return gulp.src(['js/**/*.js', 'js/*.js'])//这里先压其它js，最后再压缩app.js避免注入时顺序出错.pipe(concat('all.js')).pipe(ngAnnotate()).pipe(ngmin({dynamic: false})).pipe(gulp.dest('dist/js')).pipe(rename({suffix: '.min'})).pipe(uglify()).pipe(gulp.dest('dist/js')).pipe(notify({message: 'js task ok'}));
});//html压缩
gulp.task('html', function () {var htmlOptions = {removeComments: true,//清除HTML注释collapseWhitespace: true,//压缩HTMLcollapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"minifyJS: true,//压缩页面JSminifyCSS: true//压缩页面CSS};return gulp.src('templates/**/*.html').pipe(rev()).pipe(htmlmin(htmlOptions)).pipe(gulp.dest('./dist/templates')).pipe(notify({message: 'html task ok'}));
});// 合并、压缩、重命名css
gulp.task('minifycss', function () {var cssOption = {advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]compatibility: '*',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀};return gulp.src(['css/**/*.css', 'css/*.css']).pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0'],cascade: true, //是否美化属性值 默认：true 像这样：remove: true //是否去掉不必要的前缀 默认：true}))//.pipe(concat('main.css'))//.pipe(gulp.dest('dist/css'))//.pipe(rename({suffix: '.min'})).pipe(minifycss(cssOption)).pipe(gulp.dest('dist/css')).pipe(notify({message: 'css task ok'}));
});// 压缩图片
gulp.task('img', function () {var imgOption = {optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性use: [pngcrush()] //使用pngquant深度压缩png图片的imagemin插件};return gulp.src('img/*').pipe(imagemin(imgOption)).pipe(gulp.dest('dist/img')).pipe(notify({message: 'img task ok'}));
});// 默认任务
gulp.task('default', function () {gulp.run('minifyjs', 'minifycss', 'html', 'img');// 监听html文件变化gulp.watch('templates/**/*.html', function () {gulp.run('html');});// 监听css文件变化gulp.watch(['css/**/*.css']);// 监听js文件变化gulp.watch(['js/**/*.js', 'js/*.js']);// 监听img文件变化gulp.watch('img/*');});