【Gulp】gulp压缩前端代码提高页面的安全和性能，并实现文件修改监听及热加载

为什么前端的代码需要压缩？

前端的代码在浏览器中，经常是直接暴露出来，基本上可以说没有什么安全性可言，除了后端的校验加密之外，前端的代码也可以通过压缩来降低被攻击的可能性，而且压缩过的代码，空间更小，性能更好。

一、初始化一个 package.json 文件，用来把插件的版本号保存起来，方便插件的管理和项目的启动

npm init

二、安装需要的插件，嫌麻烦的同学可以直接复制下面的代码到package.json文件里面，然后运行npm install 直接安装

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "gulp",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.5",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.1",
    "gulp-jshint": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-uglify": "^1.5.4",
    "gulp-util": "^3.0.7",
    "imagemin-pngquant": "^5.0.0",
    "jshint": "^2.9.2",
    "gulp-clean": "^0.3.2"
  },
  "devDependencies": {
    "gulp-cheerio": "^0.6.2",
    "gulp-dom-src": "^0.2.0",
    "gulp-jslint": "^1.0.1",
    "gulp-processhtml": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-webpack": "^1.5.0",
    "imagemin-gifsicle": "^5.1.0",
    "imagemin-jpegtran": "^5.0.2",
    "imagemin-optipng": "^5.1.1",
    "imagemin-svgo": "^5.1.0",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "shijianfeishi",
  "license": "ISC"
}

或者自己安装全部需要引用的插件

npm install xxx --save

var gulp = require('gulp'),//基础库
    htmlmin = require('gulp-htmlmin'),//html压缩
    cssmin = require('gulp-minify-css'),//css压缩
    jshint = require('gulp-jshint'),//js检查
    uglify = require('gulp-uglify'),//js压缩
    imagemin = require('gulp-imagemin'),//图片压缩
    pngquant = require('imagemin-pngquant'),//图片深入压缩
    imageminOptipng = require('imagemin-optipng'),
    imageminSvgo = require('imagemin-svgo'),
    imageminGifsicle = require('imagemin-gifsicle'),
    imageminJpegtran = require('imagemin-jpegtran'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    processhtml = require('gulp-processhtml'),
    Replace = require('gulp-replace'),
    cache = require('gulp-cache'),//图片压缩缓存
    clean = require('gulp-clean'),//清空文件夹
    conCat = require('gulp-concat'),//文件合并
    plumber=require('gulp-plumber'),//检测错误
    gutil=require('gulp-util');//如果有自定义方法，会用到

三、插件安装成功之后，新建一个gulpfile.js文件，完成具体的配置以及文件压缩放到的地方

注意：

.pipe(conCat('js/index.js'))

.pipe(conCat('css/index.css'))

这两句代码是把所有的js和css压缩到一个js和css文件里面，但是这样的话会导致单个文件太大，引入很多其他页面的css，影响页面的性能，所以看项目大小情况，判断是否需要引入

var gulp = require('gulp'),//基础库
    htmlmin = require('gulp-htmlmin'),//html压缩
    cssmin = require('gulp-minify-css'),//css压缩
    jshint = require('gulp-jshint'),//js检查
    uglify = require('gulp-uglify'),//js压缩
    imagemin = require('gulp-imagemin'),//图片压缩
    pngquant = require('imagemin-pngquant'),//图片深入压缩
    imageminOptipng = require('imagemin-optipng'),
    imageminSvgo = require('imagemin-svgo'),
    imageminGifsicle = require('imagemin-gifsicle'),
    imageminJpegtran = require('imagemin-jpegtran'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    processhtml = require('gulp-processhtml'),
    Replace = require('gulp-replace'),
    cache = require('gulp-cache'),//图片压缩缓存
    clean = require('gulp-clean'),//清空文件夹
    conCat = require('gulp-concat'),//文件合并
    plumber=require('gulp-plumber'),//检测错误
    gutil=require('gulp-util');//如果有自定义方法，会用到
     
 
var date = new Date().getTime();
 
gulp.task('clean',function(){
    return gulp.src('min/**',{read:false})
        .pipe(clean());
});
function errrHandler( e ){
    // 控制台发声,错误时beep一下
    gutil.beep();
    gutil.log(e);
    this.emit('end');
}
 
gulp.task('cleanCash', function (done) {//清除缓存
    return cache.clearAll(done);
});
  
gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src(['index/*.htm','index/*.html'])       
        .pipe(plumber({errorHandler:errrHandler}))     
        .pipe(Replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('gulpmin/index'));//文件压缩后需要放到的地方
});
gulp.task('cssmin', function(){
    gulp.src('css/*.css')
        // .pipe(conCat('css/index.css')) //这句代码就是把所有的css文件压缩到一个css里面，但是这样的话会导致文件太大，引入很多其他页面的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('gulpmin/css'));
         
});
gulp.task('jsmin', function () {
    gulp.src(['js/*.js'])
        // .pipe(conCat('js/index.js')) //这句代码就是把所有的js文件压缩到一个js里面，但是这样的话会导致文件太大，引入很多其他页面的js，影响页面的性能，所以看情况是否需要引入
        .pipe(plumber({errorHandler:errrHandler}))
        .pipe(uglify({
            mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型：Boolean 默认：true 是否修改变量名
            compress: true,//类型：Boolean 默认：true 是否完全压缩
            preserveComments: 'false' //保留所有注释
        }))
        .pipe(gulp.dest('gulpmin/js'));
}); 
gulp.task('imagemin', function () {
    gulp.src('images/*.{png,jpg,gif,ico}')
        .pipe(plumber({errorHandler:errrHandler}))
        .pipe(cache(imagemin({     
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片          
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant(),imageminJpegtran({progressive: true})
            , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件          
        })))
        .pipe(gulp.dest('gulpmin/images'));
});
gulp.task('default',['clean'],function(){  
    gulp.start('cssmin','htmlmin','jsmin','imagemin');
});

四、运行下面命令运行压缩代码

gulp default

五、实现文件修改监听及热加载

npm install --save-dev gulp-connect  // 生成本地服务器及实现热加载功能

引入默认执行监听的代码

// 默认任务
gulp.task('default',['server','auto']);

// 自动创建文件并监听修改
gulp.task('auto',function(){
    // 监听当前目录下的文件夹，源码有改动就进行压缩以及热刷新
    gulp.watch('js/*.js',['reload'])
    gulp.watch('css/*.css',['reload'])
    gulp.watch('index/*.html',['reload'])
})
// 创建热加载任务
gulp.task('reload',function(){
    gulp.src('*')
        .pipe(connect.reload())
    console.log('html change')
})
// gulp服务器
gulp.task('server',function(){
    connect.server({
        root:'./',//监听当前的文件夹
        livereload:true
    })
})

浏览器打开localhost:8080，修改对应的文件就可以得到实时的结果了