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-replacevar 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,//压缩HTMLcollapseBooleanAttributes: 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,//压缩页面JSminifyCSS: 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,imggulp.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-cleanvar 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,//压缩HTMLcollapseBooleanAttributes: 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,//压缩页面JSminifyCSS: 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,imgreturn 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-cleanvar 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,//压缩HTMLcollapseBooleanAttributes: 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,//压缩页面JSminifyCSS: 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,imgreturn 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文件加上版本号相关推荐

js里css不起作用,CSS文件在NODE js中不起作用
出于某种原因,我已将我的css文件附加到我的html文件中.然后我在节点js中使用express打开html文件.但是,当我通过节点js运行Web服务器时,css文件无法打开.我认为既然css文件包含 ...
vue 引入外部less_Vue项目中引入外部文件的方法（css、js、less）
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less. ...
html+css+js+python(QtWebEngineWidgets) 实现微信聊天界面-包括时间，文件，纯文本等
文章目录展示参考文章 html + js + css python 代码地址 user目录下的 chat.py为主页面, 图片都在user/images/filetype下面相关资源展示纯h ...
vue打包配置的详细说明【config/index.js的build部份】
一.vue打包配置的详细说明[config/index.js的build部份] index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件 ...
服务器上引用不了js文件,pdf.js不通过服务器如何像普通js文件引入使用
之前有点忙,现在来补充一下这个问题的解决方案: 由于发现在苹果手机的微信直接打来非常流畅,所以在苹果手机的微信打开服务器上的pdf时,不采用pdf.js,直接打开,这个解决方案是针对安卓手机在微信打开 ...
简单使用hbuildx把vue-cli项目打包，并使用electron转换成可执行的exe文件
1.把vue-cii项目打包 vue-cli创建的项目结构右键项目(根目录)手动添加 vue.config.js 文件,添加以下内容 module.exports = {devServer: {po ...
【vite+vue3.0】基于vite写一个将md文件渲染为js文件的插件
基于vite写一个将md文件渲染为js文件的插件前言尤大是这么描述 Vite 的: 「一个基于浏览器原生 ES imports 的开发服务器. 利用浏览器去解析 imports,在服务器端按需编译 ...
vue打包的文件加上版本号
为什么要加版本号?因为有时候打包文件部署上线后发现线上没更新,原因是因为线上环境有缓存,故加上版本号可解决此问题! 在vue.config.js配置: 输出文件名js文件增加版本号: output: ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...

gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号相关推荐

最新文章

热门文章