最新の完全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//バージョン名md 5接尾辞

を変更

gulp-autoprefixer//ブラウザ接頭辞

gulp-rev-collector//gulp-revのプラグインhtmlテンプレートの参照パス

の変更に使用
ディレクトリ構造
|-root|-dist//このディレクトリは、以下に生成する|-css|-js|-images|-rev|-indexである.html|    |-node_modules|-src//リソースディレクトリ|-css|-js|-images|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({collapseWhitespace: true}))
               .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulpSequence('clean', 'css', 'js', 'image', 'revCss', 'rev'));    //       

ok! 問題があって、分からないで、間違い、みんなに積極的に伝言を残してください!