Glup--用来压缩前端js，css, 图片资源

Posted 2021-04-09 测试开发交流

小编最近研究着前端性能优化，顺便就拿自己写的测试平台来做前端资源的打包压缩

目前比较流行的工具有：gulp和webpack

webpack配置起来相对gulp比较困难，所以这次先用gulp来压缩资源。

官网：https://www.gulpjs.com.cn/

（1）使用npm来安装gulp

    npm install gulp --save-dev

（2）安装压缩插件

    1. 缩小CSS  （gulp-minify-css）

    2. 检查js  JSHint (gulp-jshint)

    3. 文件合并     gulp-concat

    4. 压缩JS     gulp-uglify

    5. 图片压缩    gulp-imagemin

    6. 图片深入压缩    imagemin-pngquant

    7. 清空文件夹     gulp-clean

    8. 图片快取，只有更改过得图片会进行压缩 (gulp-cache)

    9. html压缩    gulp-htmlmin

命令：

npm install gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-cache imagemin-pngquant gulp-htmlmin --save-dev

安装过程中，可能会出现提示，缺少package.json

npm init -f

（3）项目中使用gulp

    1. 新建gulpfile.js 文件

    2. 然后编写压缩js的代码

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('default', function() {
    // 1. 找到文件
    gulp.src('XXX/static/js/*.js')
    // 2. 压缩文件js
    .pipe(uglify({ mangle: false }))
    // 3. 另存压缩后的文件
    .pipe(gulp.dest('dist/js'))
});

3. 执行gulp命令开始压缩

   gulp 后面加你定义的task的名称

gulp default

4. 执行完毕

    

压缩后的大小，很明显是压缩了。

当然压缩照片也是如此

 var gulp = require('gulp');
//压缩图片
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
 // 将你的默认的任务代码放在这
 // 1. 找到文件
 gulp.src('xxx/static/images/*.{png,jpg,gif,ico,gif}
 //2. 压缩image
 .pipe(imagemin())
 // 3. 另存压缩后的文件
 .pipe(gulp.dest('dist/images'))
 });

执行后

另外压缩css要注意一些兼容的语法

var cssmin = require('gulp-minify-css');
gulp.task('cssmin', function () {
    gulp.src('xxx/static/css/*.css')
        //.pipe(conCat('css/index.min.css'))  合并文件
        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(cssmin({
            advanced: false,
            //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',
            //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: false,
            //类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 
            // 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/css'));
});

检查js语法错误的方法

https://blog.csdn.net/u013720580/article/details/68487871

例子：

var gulp = require('gulp');
var jshint = require('gulp-jshint');//js检查
gulp.task('default', function() {
    gulp.src('reindeer/static/js/task_list/tools.js')
    .pipe(jshint())       // 进行检查
   .pipe(jshint.reporter('default'))  // 对代码进行报错提示
});

最后html的压缩，在试验中发现，容易把django的语法改错误，需要慎重

预设任务（定义执行gulp，默认执行的任务）

gulp.task('default', ['clean'], function() {      gulp.start('default', 'cssmin'); });