如何使用gulp給資源文件加上版本

如何使用gulp給資源文件加上版本 github

１．package.json文件部分插件 plugins

"dependencies": {
    "del": "^1.1.1",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-cache": "^0.2.8",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-imagemin": "^2.2.1",
    ...
  }

２．安裝所需的gulp插件

$ npm install

３．gulpfile.js

'use strict';
var gulp = require('gulp');
/*global -$ 加載需使用的gulp插件*/
var $ = require('gulp-load-plugins')();

• 配置選項(也能夠直接在任務中寫相對路徑)

/*
  *管理資源文件路徑集合
  *config.static下
  *css scripts images 替換爲本身的路徑(可按照此配置管理)
 */
var config = {};
// 源資源文件路徑
config['static'] = {
    styles: 'static/styles/*.*',
    scripts: 'static/scripts/*.*',
    images: 'static/images/*.*',
    html:'static/*.html'
};
...

• 圖片任務流處理方法

/*
 *images 任務流
 */
gulp.task('images', function () {
    return gulp.src(config['static'].images)
        .on('error', function (err) {
            console.error('Error!', err.message);
         })
        .pipe($.imagemin({
            distgressive: true,
            progressive: true,
            interlaced: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [require('imagemin-pngquant')()]
        }))
        .pipe(gulp.dest(config['rev'].images))
        .pipe($.notify({ message: 'images task complete' }));
});
/*
 *img 添加版本任務流
 *use gulp-rev to version the rev files and generate the 'rev-manifest.json' file
 */
gulp.task('img', ['images'], function(){
    return gulp.src(config['rev'].images_file)
        .pipe($.rev())
        .pipe(gulp.dest(config['dist'].images))
        .pipe($.rev.manifest({
            base: 'dist',
            merge: true //若是存在 rev-manifest.json文件則合併
        }))
        .pipe(gulp.dest('dist'));
});

• css任務流處理方法 詳見

• js任務流處理方法 詳見

• 加入版本任務流處理方法

gulp.task('rev',['img','css','js'], function () {
    gulp.src(['rev-manifest.json', config['static'].html])
        .pipe( $.revCollector({
            replaceReved: true,
            dirReplacements: {
                //路徑替換
                // 'css': '/dist/css',
                // '/js/': '/dist/js/',
                // 'cdn/': function(manifest_value) {
                //     return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                // }
            }
        }) )
        .pipe($.minifyHtml({conditionals: true, loose: true}))
        .pipe(gulp.dest('dist'));
    gulp.task('del', require('del')('rev'));//最後刪除過渡文件目錄
});

• 開啓任務

gulp.task('test', ['clean'], function () {
  gulp.start('rev');
});