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
)
})
- 第六步：运行任务
在文件夹打开命令窗口，输入 gulp dev 就可以啦
- 如果需要更多插件点击此处
