gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程：
http://www.cnblogs.com/tugenhua0707/p/4069769.html
http://www.cnblogs.com/tugenhua0707/p/4982646.html
http://www.tuicool.com/articles/viequay
https://github.com/Platform-CUF/use-gulp
实现要点：
1、如何运行gulp的任务，加入新建好一个如下任务：
// 语法检查
gulp.task('jshint', function () {
gulp.src('js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
那么在命令行上运行：gulp jshint
2、为什么安装了全局还要安装本地，参考这个：http://www.cnblogs.com/EasonJim/p/6207201.html
3、对于npm的命令详解，参考这个：http://www.cnblogs.com/EasonJim/p/6206179.html
4、我使用的node.js版本为：v7.4.0，如下所示：
以下为我项目上的一个打包配置文件，如下：
（注意：这个没有解决同步执行问题）
var gulp = require('gulp');//gulp主组件
var htmlmin = require('gulp-htmlmin');//html压缩组件
var jshint = require('gulp-jshint');//js语法检查
var concat = require('gulp-concat');//多个文件合并为一个
var minifyCss = require('gulp-minify-css');//压缩CSS为一行；
var uglify = require('gulp-uglify');//js文件压缩
var del = require('del');//文件删除
var rev = require('gulp-rev');//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');//路径替换
var gulpRemoveHtml = require('gulp-remove-html');//标签清除，参考：https://www.npmjs.com/package/gulp-remove-html
var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，参考：https://www.npmjs.com/package/gulp-remove-empty-lines
var replace = require('gulp-replace');//文件名替换，参考：https://www.npmjs.com/package/gulp-replace
var buildBasePath = 'build/';//构建输出的目录
// 语法检查
gulp.task('jshint', function () {
gulp.src('js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//删除Build文件
gulp.task('clean:Build', function () {
del([
buildBasePath+'**/*',
]);
});
//复制文件夹
gulp.task('copy', function() {
gulp.src('plugins/**/*')
.pipe(gulp.dest(buildBasePath+'plugins'));
});
gulp.task('copyimg', function() {
//如果下面执行了md5资源文件img，那么这步可以省略
gulp.src('img/**/*')
.pipe(gulp.dest(buildBasePath+'img'));
});
//合并js,css文件之后压缩代码
//js
gulp.task('minifyjs', function(){
gulp.src('js/**/*.js')
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录
});
//jsmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyjsmd5', function() {
gulp.src('js/**/*.js')
.pipe(concat('build.min.js'))//压缩后的js
.pipe(uglify())//压缩js到一行
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(rev.manifest('rev-js-manifest.json'))////生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//css
gulp.task('minifycss', function (){
gulp.src('css/**/*.css')
.pipe(concat('build.css'))//合成到一个css
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(minifyCss())//压缩css到一样
.pipe(concat('build.min.css'))//压缩后的css
.pipe(gulp.dest(buildBasePath+'css'));//输出到css目录
});
//cssmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifycssmd5', function (){
gulp.src('css/**/*.css')
.pipe(concat('build.min.css'))//压缩后的css
.pipe(minifyCss())//压缩css到一样
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(rev.manifest('rev-css-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//imgmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyimgmd5', function (){
gulp.src(['img/**/*.jpg','img/**/*.png'])
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'img'))//输出到css目录
.pipe(rev.manifest('rev-img-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//html压缩
gulp.task('html',function(){
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: false,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('*.html')
.pipe(gulpRemoveHtml())//清除特定标签
.pipe(removeEmptyLines({removeComments: true}))//清除空白行
.pipe(htmlmin(options))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.js替换为build.min.js
gulp.task('replacejs', function(){
gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.min.js'))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.css替换为build.min.css
gulp.task('replacecss', function(){
gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.min.css'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.js替换为build.js
gulp.task('replacejsdev', function(){
gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.js'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.css替换为build.css
gulp.task('replacecssdev', function(){
gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.css'))
.pipe(gulp.dest(buildBasePath));
});
//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function() {
//html，针对js,css,img
gulp.src(['rev/**/*.json', buildBasePath+'**/*.html'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath));
});
gulp.task('revimg', function() {
//css，主要是针对img替换
gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath+'css'));
});
//监视文件的变化，有修改时，自动调用default缺省默认任务
gulp.task('watch', function () {
gulp.watch('**/*.html', ['default']);
});
//缺省默认任务，输出的js和css文件都带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、使用带md5对js文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asdf123.min.js，并输出到build/js文件夹
* 4、使用带md5对cs文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asd323.min.css，并输出到build/cs文件夹
* 5、（可选）使用带md5对img文件夹的全部文件进行重命名，命名根据gulp-rev插件md5之后的命名进行命名，如common-asdf123.jpg，并输出到build/img文件夹；如果这部不操作，下面第10步将不执行。
* 6、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 7、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 8、再次在build目录上，将html进行common.css文件替换成build.min.css
* 9、使用gulp-rev-collectorc插件对刚才生成带参数的js和css文件在html页面上进行替换，如build.min.js替换成build-asdf123.min.js。还是输出到build目录。
* 10、（可选）使用gulp-rev-collectorc插件对刚才生成带参数的img文件在css文件上进行替换，如common.jpg替换成common-asdf12.jpg。输出到目录
* */
gulp.task('default',['clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg']);
//默认任务2，输出的js和css文件不带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.min.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.min.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.min.css
* */
gulp.task('default2', ['clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss']);
//开发使用默认任务，js和css不带参数，且不合并
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.css
* */
gulp.task('defaultdev', ['clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev']);
但是很纠结的一个问题，我这样去执行默认任务：gulp，发现没有按顺序执行。
下载将改写上面的配置，加入同步顺序执行。我收集了一些同步执行的资料，参考这个：http://www.cnblogs.com/EasonJim/p/6209725.html
以下为我增加同步执行的方法：
var gulp = require('gulp');//gulp主组件
var htmlmin = require('gulp-htmlmin');//html压缩组件
var jshint = require('gulp-jshint');//js语法检查
var concat = require('gulp-concat');//多个文件合并为一个
var minifyCss = require('gulp-minify-css');//压缩CSS为一行；
var uglify = require('gulp-uglify');//js文件压缩
var rev = require('gulp-rev');//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');//路径替换
var gulpRemoveHtml = require('gulp-remove-html');//标签清除，参考：https://www.npmjs.com/package/gulp-remove-html
var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，参考：https://www.npmjs.com/package/gulp-remove-empty-lines
var replace = require('gulp-replace');//文件名替换，参考：https://www.npmjs.com/package/gulp-replace
var gulpSequence = require('gulp-sequence');//同步执行，参考：https://github.com/teambition/gulp-sequence
var clean = require('gulp-clean');//清除文件插件，参考：https://github.com/teambition/gulp-clean
var buildBasePath = 'build/';//构建输出的目录
//删除Build文件
gulp.task('clean:Build', function (cb) {
return gulp.src(buildBasePath, {read: false})
.pipe(clean());
});
//复制文件夹
gulp.task('copy', function() {
return gulp.src('plugins/**/*')
.pipe(gulp.dest(buildBasePath+'plugins'));
});
gulp.task('copyimg', function() {
//如果下面执行了md5资源文件img，那么这步可以省略
return gulp.src('img/**/*')
.pipe(gulp.dest(buildBasePath+'img'));
});
//合并js,css文件之后压缩代码
//js
gulp.task('minifyjs', function(){
return gulp.src('js/**/*.js')
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录
});
//jsmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyjsmd5', function() {
return gulp.src('js/**/*.js')
.pipe(concat('build.min.js'))//压缩后的js
.pipe(uglify())//压缩js到一行
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(rev.manifest('rev-js-manifest.json'))////生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//css
gulp.task('minifycss', function (){
return gulp.src('css/**/*.css')
.pipe(concat('build.css'))//合成到一个css
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(minifyCss())//压缩css到一样
.pipe(concat('build.min.css'))//压缩后的css
.pipe(gulp.dest(buildBasePath+'css'));//输出到css目录
});
//cssmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifycssmd5', function (){
return gulp.src('css/**/*.css')
.pipe(concat('build.min.css'))//压缩后的css
.pipe(minifyCss())//压缩css到一样
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(rev.manifest('rev-css-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//imgmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyimgmd5', function (){
return gulp.src(['img/**/*.jpg','img/**/*.png','img/**/*.gif'])
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'img'))//输出到css目录
.pipe(rev.manifest('rev-img-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//html压缩
gulp.task('html',function(){
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: false,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src('*.html')
.pipe(gulpRemoveHtml())//清除特定标签
.pipe(removeEmptyLines({removeComments: true}))//清除空白行
.pipe(htmlmin(options))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.js替换为build.min.js
gulp.task('replacejs', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.min.js'))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.css替换为build.min.css
gulp.task('replacecss', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.min.css'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.js替换为build.js
gulp.task('replacejsdev', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.js'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.css替换为build.css
gulp.task('replacecssdev', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.css'))
.pipe(gulp.dest(buildBasePath));
});
//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function() {
//html，针对js,css,img
return gulp.src(['rev/**/*.json', buildBasePath+'**/*.html'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath));
});
gulp.task('revimg', function() {
//css，主要是针对img替换
return gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath+'css'));
});
//监视文件的变化，有修改时，自动调用default缺省默认任务
gulp.task('watch', function () {
gulp.watch('**/*.html', ['default']);
});
//缺省默认任务，输出的js和css文件都带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、使用带md5对js文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asdf123.min.js，并输出到build/js文件夹
* 4、使用带md5对cs文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asd323.min.css，并输出到build/cs文件夹
* 5、（可选）使用带md5对img文件夹的全部文件进行重命名，命名根据gulp-rev插件md5之后的命名进行命名，如common-asdf123.jpg，并输出到build/img文件夹；如果这部不操作，下面第10步将不执行。
* 6、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 7、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 8、再次在build目录上，将html进行common.css文件替换成build.min.css
* 9、使用gulp-rev-collectorc插件对刚才生成带参数的js和css文件在html页面上进行替换，如build.min.js替换成build-asdf123.min.js。还是输出到build目录。
* 10、（可选）使用gulp-rev-collectorc插件对刚才生成带参数的img文件在css文件上进行替换，如common.jpg替换成common-asdf12.jpg。输出到目录
* */
gulp.task('default',gulpSequence('clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg'));
//默认任务2，输出的js和css文件不带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.min.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.min.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.min.css
* */
gulp.task('default2', gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss'));
//开发使用默认任务，js和css不带参数，且不合并
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.css
* */
gulp.task('defaultdev', gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev'));
同步任务使用了gulp-sequence插件，其中del插件去除，这个无论如何都是异步的stream，所以替换成了gulp-clean插件。
最后，我发现插件html标签这个插件也是需要用到的，比如像上面我不替换common.js，直接add一个编译后的标签时，使用这个插件：https://www.npmjs.com/package/gulp-inject
然后好像一些近乎完美，可是一个隐含的问题没有测试出，就是watch，当你运行watch时，会出现顺序执行的错误： Error: The thunkFunction already filled，其实这个错误是用了gulp-sequence插件导致的，解决办法参考：https://github.com/teambition/gulp-sequence/issues/2，原理就是加入callback回调。更新后的js文件如下：
var gulp = require('gulp');//gulp主组件
var htmlmin = require('gulp-htmlmin');//html压缩组件
var jshint = require('gulp-jshint');//js语法检查
var concat = require('gulp-concat');//多个文件合并为一个
var minifyCss = require('gulp-minify-css');//压缩CSS为一行；
var uglify = require('gulp-uglify');//js文件压缩
var rev = require('gulp-rev');//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');//路径替换
var gulpRemoveHtml = require('gulp-remove-html');//标签清除，参考：https://www.npmjs.com/package/gulp-remove-html
var removeEmptyLines = require('gulp-remove-empty-lines');//清除空白行，参考：https://www.npmjs.com/package/gulp-remove-empty-lines
var replace = require('gulp-replace');//文件名替换，参考：https://www.npmjs.com/package/gulp-replace
var gulpSequence = require('gulp-sequence');//同步执行，参考：https://github.com/teambition/gulp-sequence
var clean = require('gulp-clean');//清除文件插件，参考：https://github.com/teambition/gulp-clean
var buildBasePath = 'build/';//构建输出的目录
//删除Build文件
gulp.task('clean:Build', function (cb) {
return gulp.src(buildBasePath, {read: false})
.pipe(clean());
});
//复制文件夹
gulp.task('copy', function() {
return gulp.src('plugins/**/*')
.pipe(gulp.dest(buildBasePath+'plugins'));
});
gulp.task('copyimg', function() {
//如果下面执行了md5资源文件img，那么这步可以省略
return gulp.src('img/**/*')
.pipe(gulp.dest(buildBasePath+'img'));
});
//合并js,css文件之后压缩代码
//js
gulp.task('minifyjs', function(){
return gulp.src('js/**/*.js')
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录
});
//jsmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyjsmd5', function() {
return gulp.src('js/**/*.js')
.pipe(concat('build.min.js'))//压缩后的js
.pipe(uglify())//压缩js到一行
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(rev.manifest('rev-js-manifest.json'))////生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//css
gulp.task('minifycss', function (){
return gulp.src('css/**/*.css')
.pipe(concat('build.css'))//合成到一个css
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(minifyCss())//压缩css到一样
.pipe(concat('build.min.css'))//压缩后的css
.pipe(gulp.dest(buildBasePath+'css'));//输出到css目录
});
//cssmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifycssmd5', function (){
return gulp.src('css/**/*.css')
.pipe(concat('build.min.css'))//压缩后的css
.pipe(minifyCss())//压缩css到一样
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'css'))//输出到css目录
.pipe(rev.manifest('rev-css-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//imgmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyimgmd5', function (){
return gulp.src(['img/**/*.jpg','img/**/*.png','img/**/*.gif'])
.pipe(rev())//文件名加MD5后缀
.pipe(gulp.dest(buildBasePath+'img'))//输出到css目录
.pipe(rev.manifest('rev-img-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev'));//将 rev-manifest.json 保存到 rev 目录内
});
//html压缩
gulp.task('html',function(){
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: false,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src('*.html')
.pipe(gulpRemoveHtml())//清除特定标签
.pipe(removeEmptyLines({removeComments: true}))//清除空白行
.pipe(htmlmin(options))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.js替换为build.min.js
gulp.task('replacejs', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.min.js'))
.pipe(gulp.dest(buildBasePath));
});
//生产使用，替换文件名，common.css替换为build.min.css
gulp.task('replacecss', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.min.css'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.js替换为build.js
gulp.task('replacejsdev', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.js', 'build.js'))
.pipe(gulp.dest(buildBasePath));
});
//开发使用，替换文件名，common.css替换为build.css
gulp.task('replacecssdev', function(){
return gulp.src([buildBasePath+'*.html'])
.pipe(replace('common.css', 'build.css'))
.pipe(gulp.dest(buildBasePath));
});
//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function() {
//html，针对js,css,img
return gulp.src(['rev/**/*.json', buildBasePath+'**/*.html'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath));
});
gulp.task('revimg', function() {
//css，主要是针对img替换
return gulp.src(['rev/**/rev-img-manifest.json', buildBasePath+'css/*.css'])
.pipe(revCollector({replaceReved:true }))
.pipe(gulp.dest(buildBasePath+'css'));
});
//监视文件的变化，有修改时，自动调用default缺省默认任务
gulp.task('watch', function () {
gulp.watch('**/*.html', ['default']);
});
//监视文件的变化，有修改时，自动调用default2缺省默认任务
gulp.task('watch2', function () {
gulp.watch('**/*.html', ['default2']);
});
//监视文件的变化，有修改时，自动调用defaultdev缺省默认任务
gulp.task('watchdev', function () {
gulp.watch('**/*.html', ['defaultdev']);
});
//缺省默认任务，输出的js和css文件都带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、使用带md5对js文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asdf123.min.js，并输出到build/js文件夹
* 4、使用带md5对cs文件进行压缩打包一个文件，命名根据gulp-rev插件md5之后的命名进行命名，如build-asd323.min.css，并输出到build/cs文件夹
* 5、（可选）使用带md5对img文件夹的全部文件进行重命名，命名根据gulp-rev插件md5之后的命名进行命名，如common-asdf123.jpg，并输出到build/img文件夹；如果这部不操作，下面第10步将不执行。
* 6、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 7、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 8、再次在build目录上，将html进行common.css文件替换成build.min.css
* 9、使用gulp-rev-collectorc插件对刚才生成带参数的js和css文件在html页面上进行替换，如build.min.js替换成build-asdf123.min.js。还是输出到build目录。
* 10、（可选）使用gulp-rev-collectorc插件对刚才生成带参数的img文件在css文件上进行替换，如common.jpg替换成common-asdf12.jpg。输出到目录
* */
gulp.task('default',function(cb){gulpSequence('clean:Build','copy','minifyjsmd5','minifycssmd5','minifyimgmd5','html','replacejs','replacecss','rev','revimg')(cb);});
//默认任务2，输出的js和css文件不带参数
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.min.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.min.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.min.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.min.css
* */
gulp.task('default2',function(cb){gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejs','replacecss')(cb);});
//开发使用默认任务，js和css不带参数，且不合并
/*执行顺序：
* 1、清除编译输出目录build的全部文件
* 2、复制第三方组件依赖到build文件夹
* 3、对js文件进行压缩打包一个文件，命名如build.js，并输出到build/js文件夹
* 4、对cs文件进行压缩打包一个文件，命名如build.css，并输出到build/cs文件夹
* 5、将build目录下的全部html页面进行压缩处理，采用gulp-minhtml插进
* 6、由于项目上使用了模块开发，然后每个页面上都会引入common.js文件，而合并后的js文件为build.js，所以使用gulp-replace插进对html页面进行替换，并将html文件输出到build目录上
* 7、再次在build目录上，将html进行common.css文件替换成build.css
* */
gulp.task('defaultdev',function(cb){gulpSequence('clean:Build','copy','copyimg','minifyjs','minifycss','html','replacejsdev','replacecssdev')(cb);});
最后附上package.json文件：
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "jim",
"license": "MIT",
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-awaitable-tasks": "^1.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-htmlmin": "^3.0.0",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-order": "^1.1.1",
"gulp-remove-empty-lines": "0.0.8",
"gulp-remove-html": "^1.3.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.0.5",
"gulp-sequence": "^0.4.6",
"gulp-sync": "^0.1.4",
"gulp-sync-task": "^1.0.3",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4",
"run-sequence": "^1.2.2"
}
}
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号的更多相关文章
- MVC打包压缩JS&CSS文件调试时过滤了一些文件
BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件: 后台跟踪了 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
1.压缩tinypng图片 gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...
- 编写gulpfile.js文件：压缩合并css、js
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...
- webpack中使用html-webpack-plugin生成HTML文件并主动插入css和js引入标签
html-webpack-plugin clean-webpack-plugin 一.html-webpack-plugin 由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的 ...
- js/css在html文档中的引用外部文件方式对比
包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...
- SPRING-MVC访问静态文件,如jpg,js,css
如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg ...
- nodejs分离html文件里面的js和css
摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的例子->分离出一个html 文件里面的script 和style 里面的内容,然后单独生成js文件和css 文件.中间处理异步 ...
随机推荐
- 敏捷遇上UML—软创基地马年大会（广州站 2014-4-19）
我们将在广州为您奉献高端知识大餐,当敏捷遇上UML,会发生怎样的化学作用呢?首席专家张老师将会为您分享需求分析及软件设计方面的最佳实践,帮助您掌握敏捷.UML及两者相结合的实战技巧. 时间:2 ...
- RunLoop-Custom input source
Creating Creating a custom input source involves defining the following: The information you want yo ...
- 使用multi-paxos实现日志同步应用
paxos 说multi-paxos之前先简要说一下paxos paxos是在多个成员之间对某个值(提议)达成一致的一致性协议.这个值可以是任何东西.比如多个成员之间进行选主,那么这个值就是主的身份. ...
- 数据库设计范式1——三范式
一讲到数据库设计,大家很容易想到的就是三范式,但是第四.第五范式又是什么,不是很清楚,三范式到底怎么区分,也不清楚,作为数据库设计的基础概念,我再讲解下数据库范式. Normal form Bri ...
- MongoDB学习笔记~大叔分享批量添加—批量更新—批量删除
回到目录 说它是批量操作,就是说将集合对象一次提交到服务器,并对数据进行持久化,如果您的代码是一次一次的提交,那不算是批量操作!在之前的mongodb仓储中并没有对批量更新和批量删除进行实现,而今天在 ...
- C/S打包 客户端/windows程序 InstallShield
开发完成后,我们可以直接在Debug目录下启动exe,运行程序. 但是,要如何安装,添加到开始菜单.桌面快捷方式.任务栏等.如Office安装效果: 开始菜单: 快捷菜单: 打包步骤: 1.下载Ins ...
- 报表开发导出各种格式文件的API
文件输出的多样性,准确性和稳定性对于我们常用的报表软件来说很重要.报表的输入是指从报表的模板文件(XML格式的)创建WorkBook对象,输出则指将报表保存为各种格式文件,比如Pdf.Excel.Wo ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- Chrome插件: 网站收藏
在工作中我们会收藏很多网址.以前一直都是用的chrome里面的收藏夹.后面觉得一点都不方便.看一下Chrome插件开发挺容易入手的所以自己写了一个Chrome插件. 基于:Angularjs + ...
- 用U盘安装Ubuntu系统
用U盘安装Ubuntu,需制作一个Ubuntu的U盘安装盘,最为方便和可靠的制作方法是在Linux系统下使用dd命令,具体如下, sudo dd if=ubuntu-14.04.4-server-am ...