gulp之自動化靜态資源壓縮合并加版本号

gulp之自動化壓縮合并加版本号

這個方案主要是為了實作js/css/image的壓縮合并、自動添加版本号、自動加浏覽器字首和壓縮html。

先把下面這裡插件 npm i （插件名） -D 安裝到項目環境内

• gulp-sequence //順序執行任務
• gulp-csso //css壓縮
• gulp-jshint //js檢查
• gulp-uglify'), //js壓縮
• gulp-imagemin //壓縮圖檔
• gulp-htmlmin //壓縮html
• gulp-clean //清空檔案夾
• gulp-rev //更改版本名 md5字尾
• gulp-autoprefixer //加浏覽器字首
• gulp-rev-collector //gulp-rev 的插件，用于html模闆更改引用路徑

目錄結構

|- root

|    |-dist  //此目錄為下面生成的

|         |-css

|         |-js

|         |-images

|         |-rev

|         |-index.html

|    |-node_modules

|    |-src   //資源目錄

|         |-css

|         |-js

|         index.html

|     gulpfile.js

|     package.json

gulpfile.js檔案

var gulp = require('gulp'),
    gulpSequence = require('gulp-sequence'),    //同步執行任務
    csso = require('gulp-csso'),    //css壓縮
    jshint = require('gulp-jshint'),    //js檢查
    uglify = require('gulp-uglify'),    //js壓縮 
    imageMin = require('gulp-imagemin'),    //壓縮圖檔
    htmlMin = require('gulp-htmlmin'),   //壓縮html
    clean = require('gulp-clean'),    //清空檔案夾
    rev = require('gulp-rev'),    //更改版本名 md5字尾
    autoFx = require('gulp-autoprefixer'),    //加浏覽器字首
     revCollector = require('gulp-rev-collector');    //gulp-rev 的插件，用于html模闆更改引用路徑

//清空檔案夾
gulp.task('clean', function(){
    return gulp.src('dist', {read:false})
               .pipe(clean());
});

//壓縮css/加浏覽器字首
gulp.task('css', function(){
    return gulp.src('src/css/*.css')
        .pipe(autoFx({
            browsers: ['last 2 versions', 'Android >= 4.0']
        }))
        .pipe(csso())
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

//壓縮js
gulp.task('js', function(){
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(rev())
         .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/js'));
});

//壓縮image
gulp.task('image', function(){
    return gulp.src('src/images/*.{png,jpg,gif,ico}')
               .pipe(imageMin({
                    optimizationLevel: 5,
                    progressive: true,
                    interlaced: true,
                    multipass: true
               }))
               .pipe(rev())
               .pipe(gulp.dest('dist/images'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('dist/rev/images'));
});

//改變css引用路徑
gulp.task('revCss',function(){
    return gulp.src(['dist/rev/**/*.json','dist/css/*.css'])
               .pipe(revCollector({
                    replaceReved: true
           }))
               .pipe(gulp.dest('dist/css'));
});

//改變html引用路徑
gulp.task('rev', function(){
    return gulp.src(['dist/rev/**/*.json','src/*.html'])
               .pipe(revCollector({
                    replaceReved: true
               }))
               .pipe(htmlMin())
               .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulpSequence('clean', 'css', 'js', 'image', 'revCss', 'rev'));    //按順序執行任務           

ok! 有問題，不懂的，錯誤，請大家積極留言！