Gulp3 项目压缩

本篇文章介绍gulp3版本压缩步骤，过程中遇到的问题会在下篇博客中总结。如果不知道本地安装的gulp版本可以使用命令 gulp -v 查看。另外还可访问gulp官网 https://www.gulpjs.com.cn/ ，不过中文官网个人感觉没啥有用的东西，遇到问题还是百度靠谱一点。

构建打包

因为是对打包后的文件进行压缩，所以需要先ng build 进行打包

压缩

全局安装gulp

cnpm install gulp -g

本地安装gulp

cnpm install gulp -save

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

本地安装gulp插件

cnpm install gulp-uglify      //压缩js文件
cnpm install gulp-imagemin      //压缩图片
cnpm install gulp-htmlmin        //压缩HTML
cnpm install gulp-clean-css      //压缩css

新建gulpfile.js文件----核心代码

将以下代码放入js文件中（此文件中dist代表打包后生成的文件名称）

gulp = require('gulp'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
htmlmin = require('gulp-htmlmin'),
cssmin = require('gulp-clean-css');
// ----------------------------------------html压缩--------------------
gulp.task('testHtmlmin', function () {
var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true//压缩HTML
};
gulp.src('dist/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist'));
});

gulp.task('testAssetsHtmlmin', function () {
var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true//压缩HTML
};
gulp.src('dist/assets/fonts/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('dist/assets/fonts'));
});
// ------------------------------------------HTML压缩-------------end--

// -------------------------------------------JS压缩-------------------
gulp.task('testJS', function () {
gulp.src('dist/*.js') //多个文件以数组形式传入
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('testAssets', function () {
gulp.src('dist/assets/*.js') //多个文件以数组形式传入
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets'));
});

gulp.task('testAssetsJS', function () {
gulp.src('dist/assets/js/*.js') //多个文件以数组形式传入
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'));
});

gulp.task('testFontJS', function () {
gulp.src('dist/assets/fonts/*.js') //多个文件以数组形式传入
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/fonts'));
});
// ---------------------------------------------JS压缩----------end----

// ---------------------------------------------image图片压缩-----------
gulp.task('testImagemin', function () {
gulp.src('dist/*.{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'));
});
gulp.task('Imagemin', function () {
gulp.src('dist/assets/images/*.{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/assets/images'));
}); 
// -------------------------------------image图片压缩----------end------

// -------------------------------------css压缩------------------------
gulp.task('testCss', function () {
gulp.src('dist/*.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'));
});
gulp.task('testCssmin', function () {
gulp.src('dist/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'));
});
gulp.task('testFontCssmin', function () {
gulp.src('dist/assets/fonts/*.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/fonts'));
});
// --------------------------------------css压缩---------end-----------

执行gulp任务

gulp testJS
gulp testAssets
gulp testImagemin
gulp testCssmin
gulp testHtmlmin

结果展示

压缩前

压缩后