gulp常用功能集合(开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash)
tags: gulp 前端自动化开发
npm仓库下载地址
https://www.npmjs.com/package/cddgulp
[TOC]
本人自用在此基础上的一个完整自用框架——cddgulp
npm点这里
github点这里
另一个基于vuepack改写的自用的webpack2.x+vue2.x的实时预览前端脚手架,点这里
1.功能需要
html文件复制、自动更改hash文件链接、文件内容替换
css文件复制与hash
img文件的复制与hash
js文件的复制、压缩、合并、重命名、hash
对文件的监视与自动更新
其他配合项包括compass/sas预编译,browser-sync实时预览
2.需要的gulp插件与详解
"devDependencies": {
"del": "^2.2.1",
"gulp": "^3.9.1",
"gulp-cached": "^1.1.0",
"gulp-changed": "^1.3.1",
"gulp-clean-css": "^2.0.12",
"gulp-concat": "^2.6.0",
"gulp-csscomb": "^3.0.7",
"gulp-htmlmin": "^2.0.0",
"gulp-imagemin": "^3.0.2",
"gulp-replace": "^0.5.4",
"gulp-rev": "^7.1.0",
"gulp-rev-collector": "^1.0.5",
"gulp-uglify": "^2.0.0"
}
1.del
: 该插件不是gulp的插件而是node的插件或者一个功能,作用是删除文件/文件夹。
2.gulp
: 这个就不用多说了,本地gulp插件
3.gulp-cached
: 这个插件用来对文件进行复制时,只是对那行更改过的文件进行复制,减少不必要的资源操作。在资源很多时,例如图片的复制,这个会加快gulp任务的执行速度,特别是需要实时预览时,减少延迟。
4.gulp-changed
: 这个插件跟gulp-cacahed插件类似,他主要是在对文件进行复制时,如果该文件没有改动过,那么就不允许该文件复制到目标文件件。(自己实测时看不出来,而且如果使用cached,就不用使用这个了)
5.gulp-clean-css
: 用来对css文件进行去注释,和压缩
6.gulp-concat
: 对文件进行合并,而且可以添加一个string参数,用来对合并的文件进行重命名
7.gulp-csscomb
: 对css进行版本支持
8.gulp-htmlmin
: 对html文件进行压缩,如去换行,去注释等
9.gulp-imagemin
: 对jpg、png等格式问的图片进行无损的压缩(特别有用,但是在你的node-modules中的插件过多时会存在图片压缩过慢的问题问题)
10.gulp-replace
: 用来替换文本文件中的内容
11.gulp-rev
: 对文件进行hash命名,并且生成对应的json文件
12.gulp-rev-collector
: 结合gulp-rev对hash的文件在html文件中进行引用路径更改
13.gulp-uglify
: 对js文件进行压缩,有人叫这个作“丑化”,确实挺丑的
本人没有在gulpfile.js文件使用实时预览的插件,因为这些任务已经很多了,gulp虽然速度很快,但是执行时也会有些迟缓,所以只是外部使用了browser-sync实时预览。
此外css预编译我使用的是sass,在集成到gulp预编译时如果出现了错误的语法,整个gulp监视任务就会完全停止,所以我是用的是外部sass监视。这个可以跟gulp一块使用,gulp只是监视css文件,然后进行自己的操作即可,二者各自做各自的事,出错了也不会有中断这样的影响。
3.gulpfile.js文件代码详解。
我的开发目录
源文件gulpfile.js 提取码:aea6
1.需引入的插件
var gulp = require('gulp');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var htmlmin = require('gulp-htmlmin');
var imagemin = require('gulp-imagemin');
var uglify = require('gulp-uglify');
var cleanCss = require('gulp-clean-css');
var cache = require('gulp-cached');
var rev = require('gulp-rev');
var replace = require('gulp-replace');
var del = require('del');
var revCollector = require('gulp-rev-collector');
2.各个任务详解
1.复制html task : copyHtml
: 代码如下
//对常用的东西进行变量化
var dir = '../dist'; //对目标根目录进行变量
gulp.task('copyHtml', function(){
gulp.src('*.html') //当前目录的HTML文件
.pipe(cache('copyHtml')) //只对修改的文件进行复制
//.pipe(changed(dir))//只有变化的文件能够通过
.pipe(htmlmin({collapseWhitespace: true,
removeComments: true
})) //对html文件进行压缩处理,去换行,去注释
.pipe(replace('a.js','main.js')) //对html文件中的指定的文字进行替换
.pipe(gulp.dest(dir)); //复制到目标文件
});
2.复制css task:copyCss
: 代码如下
gulp.task('copyCss',function(){
del([dir+'/css/**/*'],{force: true}); // 由于每次更改css文件,进行hash的话旧的文件就会残留,因此每次写入前需要进行清空。
gulp.src('css/main.css')
// .pipe(changed(dir+'/css'))
.pipe(cleanCss({conpatibility: 'ie8'})) //进行压缩
.pipe(rev()) //进行hash
.pipe(gulp.dest(dir+'/css'))
.pipe(rev.manifest()) //产生hash对应的json文件
.pipe(gulp.dest(dir+'/css'));
});
3.复制图片 task:copyImg
: 代码如下
gulp.task('copyImg', function () {
gulp.src('img/*')
.pipe(cache('copyImg'))
// .pipe(changed(dir+'/img'))
.pipe(imagemin()) //对图片进行压缩
.pipe(rev())
.pipe(gulp.dest(dir+'/img'))
.pipe(rev.manifest())
.pipe(gulp.dest(dir+'/img'));
});
4.复制js文件 task:copyJs
: 代码如下
gulp.task('copyJs', function(){
del([dir+'/js/**/*'],{force: true}); //与css同理删除
gulp.src('js/*.js')
.pipe(cache('copyJs'))
.pipe(concat('main.js')) //对js文件进行合并和重命名
.pipe(uglify()) //对合并后的文件进行压缩
.pipe(rev())
.pipe(gulp.dest(dir+'/js'))
.pipe(rev.manifest())
.pipe(gulp.dest(dir+'/js'));
});
5.对html中的静态资源(css,js,image)进行hash后的文件引用替换
: 代码如下
gulp.task('rev',function(){
gulp.src([dir+'/**/*.json', dir+'/*.html']) //找到json,和目标html文件路径
.pipe(revCollector({
replaceReved: true,
// dirReplacements: {
// 'a.js':'main.js'
// }这里主要是对文件路径中的文字进行修改
})) //进行替换
.pipe(gulp.dest(dir));
});
6.监视文件,并进行自动操作 task : watch
: 代码如下
gulp.task('watch',function(){
gulp.watch('*.html', ['copyHtml']); //监视html文件,如果发生变化就进行复制
gulp.watch('css/main.css', ['copyCss']); //监视css文件,如果发生变化就进行复制
gulp.watch('img/*.{jpg,png}',['copyImg']); //监视图片,如果发生变化就进行复制
gulp.watch('js/*.js', ['copyJs']); //监视js文件,如果发生变化就进行复制
gulp.watch(dir+'/{**/*.json,/*.html}', ['rev']) //监视json文件和html文件,如果发生变化就进行hash命名,和引用更改
});
7.设置默认任务 task : default
: 代码如下
gulp.task('default',['copyHtml','copyCss','copyImg','copyJs','watch']
);
8.lastWorks 最后的任务
: 代码如下
gulp.task('cleanCache', function(){
delete cache.caches['copyHtml','copyImg','copyJs'];
}) //由于cache不会自动清除缓存的东西,所以需要手动消除
gulp.task('lastWorks',['cleanCache'] );
9.其他任务——清除开发文件夹(dist)
: 代码如下慎用
gulp.task('clean', function(){
del(['../dist/**/*'],{force: true});
}); //清除dist中所有的文件和文件夹,适合新的项目开始时使用
10.新任务开始前的旧任务打包 task:packageProject
: 代码如下
gulp.task('packageProject',function(){
var zip = require('gulp-zip');
var fileName = 'projectNew_0.zip';
gulp.src(['../dist/**/*','!../dist/{css,js,img}/*.json']) //找到目标文件夹并且进行去除json文件处理
.pipe(zip(fileName)) //对文件进行压缩和重命名
.pipe(gulp.dest('../../projectNew')); //压缩到指定文件夹
});
4.总结
现在流行的webpack包管理软件又要读前端进行革命了。但是gulp作为个入门短时间内还是不能够被取代得了的。
5.github项目地址:
点击这里