gulp學習指南之CSS合並、壓縮與MD5命名及路徑替換

1.引入插件　

var gulp = require('gulp'),
  //  uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    minifycss = require('gulp-minify-css'),
     rev = require('gulp-rev'),
    revcollector = require('gulp-rev-collector');

控制台輸入

npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev

2.在gulpfile.js里寫代碼

gulp.task('concat',function(){
    gulp.src('XingboWeb/scenemall/public/static/css/reset.css')  //要壓縮的文件
        .pipe(minifycss('reset.css'))       //壓縮css
        .pipe(rev())                        //文件名加md5后綴
        .pipe(gulp.dest('dist/css'))　　　　 //
        .pipe(rev.manifest())　　　　　　　　 //rev-mainfest.json文件，里面是壓縮文件的信息
        .pipe(gulp.dest('dist/rev'));
});

gulp.task('rev',function(){
    gulp.src(['dist/rev/*.json','XingboWeb/scenemall/app/views/home/detail.phtml'])   //讀取壓縮文件信息，和要替換目錄的文件
        .pipe(revcollector({        //執行替換
            replaceReved:true,
            dirReplacements:{      
                'css':'dist/css'
            }
        }))
        .pipe(gulp.dest('XingboWeb/scenemall/app/views/home/'))
    //    .pipe(gulp.dest('dist/html'))
})

注意：minifycss壓縮文件名一定要替換目錄里的文件名一致，否則替換不成功，例如文件名里reset.css，但是壓縮的文件名是reset.min.css，這樣的是不能替換成功的

3.之后在控制台運行gulp,就可以替換成功了