guip压缩教程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/afjaklsdflka/article/details/81611131

构建打包之后执行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 命令打包,则无需执行此全局替换命令)

结果展示:

压缩前

压缩后

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页