使用gulp对代码进行压缩

1、配置文件gulp.js

1、需要安装的包。（使用npm）
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');//提示信息

2、合并压缩js
// 检查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','!src/js/all.js'])//这里先压其它js，最后再压缩app.js避免注入时顺序出错
        .pipe(concat('all.js'))
        .pipe(ngAnnotate())
        .pipe(ngmin({dynamic: false}))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(notify({message: 'js task ok'}));
});

3、html压缩
//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'}));
});

4、压缩、合并、重命名css
// 合并、压缩、重命名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'}));
});

5、压缩图片
// 压缩图片
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'}));
});

6、配置执行任务
// 默认任务
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/*');
});

package.json文件

{
  "name": "jiabao",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean-css": "^3.7.0",
    "gulp-concat": "^2.6.1",
    "gulp-css-spriter": "^0.4.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-jshint": "^2.0.4",
    "gulp-less": "^3.3.2",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-ngmin": "^0.3.0",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^8.0.0",
    "gulp-rev-append": "^0.1.8",
    "gulp-rev-collector": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "imagemin-pngcrush": "^5.1.0",
    "jshint": "^2.9.5"
  }
}