gulp 静态资源版本控制

package.json

{
  "name": "gulp",
  "version": "0.0.1",
  "description": "Pages for Staging Financial App",
  "devDependencies": {
    "browser-sync": "*",
    "del": "*",
    "gulp": "*",
    "gulp-asset-rev": "*",
    "gulp-concat": "*",
    "gulp-if": "*",
    "gulp-jshint": "*",
    "gulp-load-plugins": "*",
    "gulp-minify-css": "^*",
    "gulp-minify-html": "*",
    "gulp-sass": "*",
    "gulp-size": "*",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*",
    "gulp-useref": "*",
    "run-sequence": "*"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": true
}

gulpfile.js

/**
 * Created by efric.hu on 2016/11/4.
 */
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var assetRev = require('gulp-asset-rev');

function gulpScripts(app_name) {
    return gulp.src([app_name + '/**/*.js']) //源文件下的所有js
        .pipe(assetRev())                    //配置版本号
        .pipe($.uglify())                    //进行压缩,如果需要合并也可加上合并的代码
        .pipe(gulp.dest(app_name + "_dist"));//复制到目标文件路径
}

function gulpStyles(app_name) {
    return gulp.src([app_name + '/**/*.css'])
        .pipe(assetRev())
        .pipe($.minifyCss())
        .pipe(gulp.dest(app_name + "_dist"));
}

function gulpImages(app_name) {
    return gulp.src([app_name + '/**/images/*'])
        .pipe(gulp.dest(app_name + "_dist"));   //复制所有图片到目标文件夹
}

function gulpRevHtml(app_name) {
    gulp.src([app_name + '/*.html', app_name + '/**/*.html'])   //源文件下面是所有html
        .pipe(assetRev())                                       //配置引用的js和css文件,需要的话也可以用minifyHtml压缩html文件
        .pipe(gulp.dest(app_name + '_dist'));                   //打包到目标文件夹路径下面
}

gulp.task('app_scripts', function(){
    gulpScripts("app");
});
gulp.task('app_styles', function(){
    gulpStyles("app");
});
gulp.task('app_images',function(){
    gulpImages("app");
});
gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
    gulpRevHtml("app");
});
gulp.task('clean', del.bind(null, ['app_dist'], {
    force: true
}));
gulp.task("beike", function() {
    runSequence('clean', ["app_images", "app_rev"]);
});

所有项目文件定义在app文件夹下面,自动生成app_dist文件夹为实际添加版本后的项目文件

注意需要修改一个node_modules文件

node_modules --> gulp-assets-rev -->index.js

var verStr = (options.verConnecter || "ef-") + md5;
src = src + "?v=" + verStr;
// src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");

  

 

posted @ 2016-11-04 17:40  cench  阅读(983)  评论(0编辑  收藏  举报