天天看點

gulp 整合、壓縮js、css代碼

gulp簡單建構一個前端項目;      
var gulp = require('gulp'),
    rev = require('gulp-rev'),
    revReplace = require('gulp-rev-replace'),
    useref = require('gulp-useref'),                //-合并js和css
    filter = require('gulp-filter'),                //-檔案
    uglify = require('gulp-uglify'),		    //壓縮js
    csso = require('gulp-csso');                    //壓縮css

gulp.task('default',function(){
    var jsFilter = filter('**/*.js',{restore:true}); 
    var cssFilter = filter('**/*.css',{restore:true});
    var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true});

    return gulp.src('app/index.html')   //index首頁
        .pipe(useref())//合并js ,css
        .pipe(jsFilter)
        .pipe(uglify())//壓縮js
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(csso())//壓縮css
        .pipe(cssFilter.restore)
        .pipe(indexHtmlFilter)
        .pipe(rev())//添加哈希
        .pipe(indexHtmlFilter.restore)
        .pipe(revReplace())//替換哈希碼
        .pipe(gulp.dest('dist'));//輸出
});