guip压缩教程

构建打包之后执行gulp压缩

前提：

Gulp压缩的一般都是js，css，html，image等文件。使用gulp压缩之后代码会更加安全体积会变小。Gulp插件不同所涉猎的功能也不同。常用的gulp插件

步骤：

1全局安装

gulp ----cnpm install gulp –g

2本地安装

gulp ----cnpm install gulp –save

注：全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。

3本地安装gulp插件

cnpm install gulp-rename  ---重命名文件

cnpm install gulp-uglify    ---压缩js文件

cnpm insall gulp-imagemin  ---压缩图片

cnpm install gulp-htmlmin   ---压缩HTML

cnpm install gulp-minify-css ---压缩css

4新建gulpfile.js文件

（重要）(此文件中的prod代表打包后生成的文件名称)
//导入工具包  require（‘node_modules里对应模块’）
var gulp = require('gulp'),     //本地安装gulp所用到的地方
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    htmlmin = require('gulp-htmlmin');
        cssmin = require('gulp-minify-css');
//定义一个testJS任务（自定义任务名称）
gulp.task('testJS', function () {
    gulp.src('prod/*.js') //该任务针对的文件
        .pipe(uglify())//该任务调用的模块
        .pipe(gulp.dest('dist'));//输出路径
});
//定义一个testAssets任务压缩js
gulp.task('testAssets', function () {
    gulp.src('prod/assets/js/*.js') //多个文件以数组形式传入
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'));
});
  //定义一个testImagemin任务压缩image
gulp.task('testImagemin', function () {
    gulp.src('prod/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist'));
});
//定义一个testHtmlmin任务压缩html
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true//压缩HTML
           };
    gulp.src('prod/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist'));
});
//定义一个testCssmin任务压缩css
gulp.task('testCssmin', function () {
    gulp.src('prod/assets/css/*.css')
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/assets/css'));
});

5执行gulp任务

gulp testJS

gulp testAssets

gulp testImagemin

gulp testCssmin

gulp testHtmlmin

6全局替换

cp -r prod(打包文件名)\文件夹位置*.map dist\文件夹位置(如果是 ng build --prod 命令打包,则无需执行此全局替换命令)

结果展示：

压缩前

压缩后