gulp对项目中的CSS JS 使用MD5码
1，gulp环境
npm init
//- 生成一个 package.json，里面是一些常规的配置信息
npm install gulp gulp-minify-css gulp-rev gulp-rev-collector del gulp-clean gulp-run-sequence gulp-uglify gulp-concat --save-dev
//- 安装插件到项目目录内
npm install --global gulp
2，gulpfile.js文件
var gulp = require('gulp');
var concat = require('gulp-concat'); //- 多个文件合并为一个；
var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行；
var rev = require('gulp-rev'); //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector'); //- 路径替换
var del = require('del');
var clean = require('gulp-clean');
var runSequence = require('gulp-run-sequence');
gulp.task('clean', function() {
del('dist');
});
gulp.task('build-clean', function() {
return gulp.src('dist').pipe(clean());
});
gulp.task('css', function() { //- 创建一个名为 concat 的 task
gulp.src(['../WebContent/**/*.css']) //- 需要处理的css文件，放到一个字符串数组里
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('dist')) //- 输出文件本地
.pipe(rev.manifest({path:'rev-manifest-css.json'})) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist')); //- 将 rev-manifest.json 保存到 rev 目录内
});
参考http://www.tuicool.com/articles/A7fqUn
var uglify = require('gulp-uglify'); // js压缩
gulp.task('js', function() {
return gulp.src('../WebContent/**/*.js') // 指明源文件路径、并进行文件匹配
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
.pipe(rev())
.pipe(gulp.dest('dist')) // 输出路径
.pipe(rev.manifest({path:'rev-manifest-js.json'})) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist')); //- 将 rev-manifest.json 保存到 rev 目录内
});
gulp.task('rev',['js','css'], function() {
gulp.src(['dist/rev-manifest-js.json','dist/rev-manifest-css.json', '../WebContent/**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist')); //- 替换后的文件输出的目录
});
gulp.task('build', function(cb) {
runSequence('build-clean','rev');
});
gulp.task('default', ['build']);