Gulp

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；

她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；

使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

如何使用gulp解决缓存

第一步：在电脑上安装nodejs，gulp是基于node构建工程（自行百度）
第二步：全局安装gulp

npm install -g gulp

第三步：安装所需要的插件，gulp之所以强大是因为它方法简单和强大的插件

 npm install gulp gulp-minify-css gulp-uglify gulp-htmlmin gulp-clean run-sequence gulp-rev gulp-rev-collector --save-dev

插件介绍：
gulp-minify-css：css压缩
gulp-uglify：js压缩
gulp-htmlmin：html压缩
gulp-clean：清空文件
run-sequence：顺序执行任务
gulp-rev：重命名（重要）
gulp-rev-collector：更改引入的文件（重要）

第四步：在项目目录中创建 gulpfile.js 文件，引入插件

var gulp = require('gulp'),
    cssMini = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    htmlMin = require('gulp-htmlmin'),
    clean = require('gulp-clean'),
    run = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    jsSrc = './js/*.js', // 所有js文件
    cssSrc = './css/*.css', // 所有css文件
    imgSrc = './img/*', // 所有的图片
    secHtml = './pages/*.html'; // 二级页面

第五步：创建工程任务

// 图片重命名 生成对应表
gulp.task('revImg', function(){
    return gulp.src(imgSrc)
        .pipe(rev()) // 图片重命名加哈希值
        .pipe(gulp.dest('./dist/img')) // 文件存位置
        .pipe(rev.manifest()) // 生成名称对应的json
        .pipe(gulp.dest('./rev/img')) // json 文件保存位置
})
// css 替换 图片名称 压缩 生成对应表 
gulp.task('revCssImg', function(){
    return gulp.src(['./rev/img/*.json', cssSrc])
        .pipe(revCollector()) // 根据对应的json 替换 所有css 内的图片
        .pipe(rev()) 
        .pipe(cssMini()) // 压缩css
        .pipe(gulp.dest('./dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev/css'))
})
// js 重命名 压缩 生成对应表
gulp.task('jsUglify', function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev/js'))
})
// 主页面替换
gulp.task('revHtml', function(){
    gulp.src(['./rev/css/*.json', './rev/js/*.json', './*.html'])
        .pipe(revCollector())
        .pipe(htmlMin({
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true
        }))
        .pipe(gulp.dest('./dist'))
    gulp.src(['./rev/css/*.json', './rev/js/*.json', './pages/**/*.html'])
        .pipe(revCollector())
        .pipe(htmlMin({
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true
        }))
        .pipe(gulp.dest('./dist/pages'))
})
// 清空文件夹
gulp.task('clean', function(){
    return gulp.src(['./dist/*','./rev/*'], {read: false})
        .pipe(clean())
})
gulp.task('dev', function(done){
 // 按照顺序执行任务
    run(
        ['clean'],
        ['revImg'],
        ['revCssImg'],
        ['jsUglify'],
        ['revHtml'],
        done
    )   
})