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']);

 

 

参考文件http://www.tuicool.com/articles/A7fqUn