构建打包之后执行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 命令打包,则无需执行此全局替换命令)
结果展示:
压缩前
压缩后