zoukankan      html  css  js  c++  java
  • 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");
    

      

  • 相关阅读:
    SharedPreferences(转)
    android操作XML的几种方式(转)
    adb 卸载APP命令和杀死APP命令
    Android判断App是否在前台运行(转)
    Java中的Timer和TimerTask在Android中的用法(转)
    Android: 启动另外的APP及传递参数(转)
    BroadcastReceiver应用详解(转)
    Android---让你的APK程序开机自动运行(转)
    adb shell 命令详解(转)
    C#串口介绍以及简单串口通信程序设计实现
  • 原文地址:https://www.cnblogs.com/cench/p/6031226.html
Copyright © 2011-2022 走看看