前端成长计划之gulp正经的热更新和无缓存发布

#本文实现功能：使用gulp一系列插件对css,js,html进行压缩处理，减少静态资源的体积，提高性能

#重点是：实现了实时热更新，并且利用追加页面的css,js的引用链接的hash值，从而避免每次发布代码的缓存问题

#文章宗旨：除非npm对个别包有迭代，否则代码拿走复制粘贴即可使用，读者可以自行对其修改符合自己的应用场景，绝无忽悠

==============从下面可是复制================

var gulp = require('gulp');//引用gulp

var jshint = require('gulp-jshint'); // 引入检测js文件模块

var uglify = require('gulp-uglify'); // 引入js压缩模块

var minhtml = require('gulp-minify-html'); // 引入html压缩模块

var minify = require('gulp-minify-css'); // 引入压缩css的模块

var imagemin = require('gulp-imagemin'); // 引入压缩图片插件

var postcss = require('gulp-postcss'); //JavaScript 代码来转换CSS 中的样式

var autoprefixer = require('autoprefixer'); //自动加上浏览器前缀

var browserSync = require('browser-sync');//启动静态服务器

var opn = require('opn');//监听静态服务器

var clean = require('gulp-clean');//清理

var rev=require('gulp-rev-append');//追加js，css引用的hash参数防止缓存

// 定义path var path = {

css: './css/*.css',

js: './js/*.js',

html: './*.html',

src: './dist'

};

//0.清空文件夹

gulp.task('clean', function () {

return gulp.src(['dist/*.html','dist/css/*.css','dist/js/*.js'], {read: false})
 
.pipe(clean());

});

// 1.处理js文件

gulp.task('js', function () {

return gulp.src('js/*.js')

    .pipe(jshint()) //检测js
    
    .pipe(uglify()) //压缩js
    
    .pipe(gulp.dest('dist/js')) //将合并后的js文件输出到build文件夹下

});

// 2.处理css

gulp.task('css', function () {

return gulp.src('css/*.css') // 指定css文件夹下的所有后缀为.css的文件

    .pipe(postcss([autoprefixer()]))  //自动加上浏览器前
    
    .pipe(minify()) //使用minify模块进行css 压缩
    
    .pipe(gulp.dest('dist/css')) // 最终将压缩的文件输出到minicss文件下

})

// 3.压缩img

gulp.task('img', function () {

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin({
    
        progressive: true, //Boolean类型 默认:false 无损压缩图片
        
        optimizationLevel: 5, //number类型 默认:3 取值范围:0-7(优化等级)
        
        interlced: true, //Boolean类型 默认false 隔行扫描gif进行渲染
        
        multipass: true //Boolean类型 默认false 多次优化svg直到完全优化
        
    }))
    
    .pipe(gulp.dest('dist/images'))

})

// 4.压缩html

gulp.task('html', function () {

gulp.src('*.html') //指定当前文件夹下的所有html文件

    .pipe(minhtml()) //进行压缩
    
    .pipe(rev())
    
    .pipe(gulp.dest('dist'))
    
    .pipe(browserSync.stream()); //自动打开浏览器

})

// 命令行输入gulp或者 gulp default的时候就会执行

gulp.task('default', function () {

//把任务串联起来

gulp.start('clean','js', 'css', 'img', 'html');

//打开静态服务器

browserSync.init({

    server: {
    
        baseDir: path.src
        
    },
    
    port: 3000,
    
    open: false
    
}, function () {

    var homepage = 'http://localhost:3000/';
    
    opn(homepage);
    
});

//监听文件的变化实时编译 然后刷新

gulp.watch([path.html, path.js, path.css]).on("change", function () {

    gulp.start('js', 'css', 'img', 'html');
    
    browserSync.reload();
    
});

});