angular配合gulp进行代码打包和压缩

这里说一下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"),//压缩js
    ngmin = require('gulp-ngmin'),//angular依赖
    ngAnnotate = require('gulp-ng-annotate'),//angular依赖
    minifycss = require("gulp-minify-css"),//压缩css
    htmlmin = 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,//压缩HTML
        collapseBooleanAttributes: 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,//压缩页面JS
        minifyCSS: 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/*');

});