gulp組織小型項目小記

2json 發布于2019-08-20 12:34 / 2856人閱讀

摘要：目前正在開發一個系統，對于前端模塊化與打包這塊出現了一些選擇。采用模塊化及打包由于項目比較小，稍微了解后，覺得沒必要采用。組件化，目前比較流行的如等。項目較小需要交互更新頁面的并不多，沒有采用。

目前正在開發一個python markdown wiki系統，對于前端模塊化與打包這塊出現了一些選擇。
1、采用webpack模塊化及打包
由于項目比較小，稍微了解后，覺得沒必要采用webpack。殺雞焉用牛刀？
2、采用requirejs模塊化，gulp打包
還是由于項目比較小，甚至不需要進行模塊化，所以放棄采用requirejs,只是采用gulp進行打包。
3、css預編譯框架,目前比較流行的有sass,less:目前沒有采用，下一步嘗試一下。
4、js組件化，目前比較流行的如Angular,VueJs等。項目較小,需要ajax交互更新頁面的并不多，沒有采用。部分功能用模板引擎的宏來實現。

當然采用gulp打包主要是為了解決以下幾個問題：
1、js、css文件壓縮與合并
2、js、css緩存與版本問題

關于js、css緩存與版本問題問題，目前為解決新版本發布，使得瀏覽器緩存發送新的請求而不是使用緩存的js，css文件。有兩種方案：

app.js變為app-2qwee.js

app.js變為app.js?v=wqe2434er3

我比較喜歡的是后者方式。
gulp有個插件gulp-version-number可以解決這個問題，但是由于我采用模板引擎jinja2與flask框架開發，所以html中是這樣的

經過gulp-version-number編譯后變成了

而我期望的是

好奇的你肯定會問，為什么期望的不是這樣呢？
url_for("static", filename="app.css?v=16124df4fdca2e5244636c2bca625276") }}"
經實驗，經過url_for輸出結果中?變成了%3F，經過了urlencode，所以瀏覽器無法識別它為查詢參數。

沒辦法，只能改改這個插件的源碼：具體代碼在插件代碼的index.js處：大概在207-284行部分：
主要改動就是替換sts[i].match正則，加入_RULE長度判斷。

   var appendto = {
        "css": function (content, k, v) {
            var sts = content.match(/]*rel=[""]?stylesheet[""]?[^>]*>/g);
            
            if (util.isArray(sts) && sts.length) {
                for (var i = 0, len = sts.length; i < len; i++) {
                    
                    //var _RULE = sts[i].match(/href=[""]?([^>""]*)[""]?/);
                    var _RULE=sts[i].match(/({{surl_for("static",s?filename=[""].*?[""]s?)s}})/);
                    if(!_RULE||_RULE.length<2){
                        continue;
                    }
                    console.log(sts[i]);
                    console.log(_RULE[1]);
                    if (_RULE[1]) {
                        var _UrlPs = parseURL(_RULE[1]);
                        var _Query = queryToJson(_UrlPs.query);
                        var _Append = {};
                        if (!_Query.hasOwnProperty(k) || this["cover"]) {
                            _Append[k] = v;
                        }
                        _UrlPs.query = jsonToQuery(util._extend(_Query, _Append));
                        content = content.replace(sts[i], sts[i].replace(_RULE[1], renderingURL(_UrlPs)));
                    }
                }
            }
            return content;
        },
        "js": function (content, k, v) {
            var sts = content.match(/]*src=[""]?([^>""]*)[""]?[^>]*>[^<]*/g);
            if (util.isArray(sts) && sts.length) {
                for (var i = 0, len = sts.length; i < len; i++) {
                    var _RULE = sts[i].match(/({{surl_for("static",s?filename=[""].*?[""]s?)s}})/);//.match(/src=[""]?([^>""]*)[""]?/);
                    if(!_RULE||_RULE.length<2){
                        continue;
                    }
                    console.log(sts[i]);
                    console.log(_RULE[1]);
                    
                    if (_RULE[1]) {
                        var _UrlPs = parseURL(_RULE[1]);
                        var _Query = queryToJson(_UrlPs.query);
                        var _Append = {};
                        if (!_Query.hasOwnProperty(k) || this["cover"]) {
                            _Append[k] = v;
                        }
                        _UrlPs.query = jsonToQuery(util._extend(_Query, _Append));
                        content = content.replace(sts[i], sts[i].replace(_RULE[1], renderingURL(_UrlPs)));
                    }
                }
            }
            return content;
        },
        "image": function (content, k, v) {
            var sts = content.match(/]*>/g);
            if (util.isArray(sts) && sts.length) {
                for (var i = 0, len = sts.length; i < len; i++) {
                    var _RULE = sts[i].match(/({{surl_for("static",s?filename=[""].*?[""]s?)s}})/);//.match(/src=[""]?([^>""]*)[""]?/);
                    if(!_RULE||_RULE.length<2){
                        continue;
                    }
                    console.log(sts[i]);
                    console.log(_RULE[1]);
                    if (_RULE[1]) {
                        var _UrlPs = parseURL(_RULE[1]);
                        var _Query = queryToJson(_UrlPs.query);
                        var _Append = {};
                        if (!_Query.hasOwnProperty(k) || this["cover"]) {
                            _Append[k] = v;
                        }
                        _UrlPs.query = jsonToQuery(util._extend(_Query, _Append));
                        content = content.replace(sts[i], sts[i].replace(_RULE[1], renderingURL(_UrlPs)));
                    }
                }
            }
            return content;
        }
    };

然后，項目主要配置文件如下：不多說，具體看配置
package.json

{
  "name": "mdwiki",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "xbynet",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-flatten": "^0.3.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rev": "^7.1.2",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-version-number": "^0.1.5",
    "pump": "^1.0.1",
    "run-sequence": "^1.2.2"
  }
}

gulpfile.js

const gulp = require("gulp");
const uglify = require("gulp-uglify");
const pump = require("pump");
const version = require("gulp-version-number");
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps=require("gulp-sourcemaps");
const runSequence = require("run-sequence");
const del = require("del");
const cssmin = require("gulp-minify-css");
//const imagemin = require("gulp-imagemin");
const clean = require("gulp-clean");
//const flatten = require("gulp-flatten");
const DEST_DIR="build";
const SRC_DIR="mdwiki-master/app";
// Environment setup.
var env = {
    production: false
};

// Environment task.
gulp.task("set-production", function(){
    env.production = true;
});

const versionConfig = {
  "value": "%MDS%",
  "append": {
    "key": "v",
    "to": ["css", "js","image"],
  },
};

gulp.task("html",()=>{
    return gulp.src(SRC_DIR+"/**/*.html")
    .pipe(version(versionConfig))
    .pipe(gulp.dest(DEST_DIR));
});
gulp.task("jsmin", function (cb) {
    if(env.production){
        return gulp.src([SRC_DIR+"/**/*.js"])
        .pipe(uglify({mangle: {except: ["require" ,"exports" ,"module" ,"$"]}})) //排除混淆關鍵字
        .pipe(gulp.dest(DEST_DIR));
    }
    else{
        return gulp.src([SRC_DIR+"/**/*.js"])
        .pipe(sourcemaps.init())
        .pipe(uglify({mangle: {except: ["require" ,"exports" ,"module" ,"$"]}})) //排除混淆關鍵字
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(DEST_DIR));
    }
    
});
gulp.task("cssmin", function () {
    if(env.production){
        return gulp.src(SRC_DIR+"/**/*.css")
        //.pipe(concat("main.css"))
        .pipe(autoprefixer("last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"))
        .pipe(cssmin())
        .pipe(gulp.dest(DEST_DIR));
    }
    else{
        return gulp.src(SRC_DIR+"/**/*.css")
        //.pipe(concat("main.css"))
        .pipe(autoprefixer("last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"))
        .pipe(sourcemaps.init())
        
        .pipe(cssmin())
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(DEST_DIR));
    }
    
});
gulp.task("rawtoone", () =>{
    return gulp.src([SRC_DIR+"/**/*.{png,jpg,jpeg,gif,bmp,ico}",SRC_DIR+"/**/*.{swf,eot,svg,ttf,woff}"])
        .pipe(flatten())
        //.pipe(imagemin())
        .pipe(gulp.dest(DEST_DIR));
    }
);
gulp.task("copy", () =>{
    return gulp.src([SRC_DIR+"/**/*.{png,jpg,jpeg,gif,bmp,ico}",SRC_DIR+"/**/*.{swf,eot,svg,ttf,woff}"])
        .pipe(gulp.dest(DEST_DIR));
    }
);
// Clean
gulp.task("clean", function(cb) {
   return  del(["./build"],cb);
      // return gulp.src("build", {read: false,force: true})
      //  .pipe(clean());
});
// Default task
gulp.task("dev",function(callback) {
    runSequence("clean",["html", "jsmin","cssmin","copy"],callback);
});

gulp.task("product",function(callback) {
    runSequence("set-production","clean",["html", "jsmin","cssmin","copy"],callback);
});
gulp.task("watch", function() {
  gulp.watch(SRC_DIR+"/**/*.html",["html"]);
  gulp.watch(SRC_DIR+"/**/*.js", ["jsmin"]);
  gulp.watch(SRC_DIR+"/**/*.css", ["cssmin"]);
  gulp.watch([SRC_DIR+"/**/*.{png,jpg,jpeg,gif,bmp,ico}",SRC_DIR+"/**/*.{swf,eot,svg,ttf,woff}"],["copy"]);
  // Create LiveReload server
  //livereload.listen();
  // Watch any files in dist/, reload on change
  //gulp.watch(["dist/**"]).on("change", livereload.changed);
});

GPU云服務器云服務器小型java項目實例 thinking-in小記 gulp thinking-in-小記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81060.html

gulp組織小型項目小記

摘要：目前正在開發一個系統，對于前端模塊化與打包這塊出現了一些選擇。采用模塊化及打包由于項目比較小，稍微了解后，覺得沒必要采用。組件化，目前比較流行的如等。項目較小需要交互更新頁面的并不多，沒有采用。目前正在開發一個python markdown wiki系統，對于前端模塊化與打包這塊出現了一些選擇。1、采用webpack模塊化及打包由于項目比較小，稍微了解后，覺得沒必要采用webpack...

Heier 2019-07-31 10:54 評論0 收藏0
mdwiki開發之路一技術選型

摘要：是一款系統，可以作為個人或小型團隊的知識庫管理系統。再加上目前開始學習與爬蟲。技術選型作為新手，義不容辭為什么就為了原生支持開玩笑因為代表了的未來，而且越來越多的庫已經遷移到了，沒有什么理由不選擇它。 mdwiki是一款markdown wiki系統，可以作為個人或小型團隊的知識庫管理系統。項目地址：本系列文章最后一篇給出(需要時間整理和測試) 為什么我要開發mdwiki? 目前本人的...

pubdreamcc 2019-08-22 10:46 評論0 收藏0
mdwiki開發之路一技術選型

摘要：是一款系統，可以作為個人或小型團隊的知識庫管理系統。再加上目前開始學習與爬蟲。技術選型作為新手，義不容辭為什么就為了原生支持開玩笑因為代表了的未來，而且越來越多的庫已經遷移到了，沒有什么理由不選擇它。 mdwiki是一款markdown wiki系統，可以作為個人或小型團隊的知識庫管理系統。項目地址：本系列文章最后一篇給出(需要時間整理和測試) 為什么我要開發mdwiki? 目前本人的...

李昌杰 2019-07-31 10:54 評論0 收藏0
gulp4.0升級小記

摘要：前言周日在公司的新電腦在以前配置的目錄按下時發現報了錯，百度了一下得知原來已經到了版本，就花了一點時間去升了個級，順便記下我個人使用到的配置文件新版本的不同點，文筆和水平有限，多多見諒新引入新引入的可替換老版的和，代碼更簡潔是任務監聽是任務前言周日在公司的新電腦在以前gulp3.9配置的目錄按下npm install時發現報了錯，百度了一下得知原來gulp已經到了4.0版本，就花了...

zorpan 2019-08-23 18:12 評論0 收藏0
一篇 NPM 常見問題小記

摘要：常見問題的中的和會匹配最近的小版本依賴包，比如會匹配所有版本，但是不包括會匹配最新的大版本依賴包，比如會匹配所有的包，包括，但是不包括你也有可能會看見在中模塊的版本號前面既沒有也沒有就像下面那樣上面的情況屬于精確安裝模塊指定的版本號。常見問題 1.npm 的package.json中的~和^ ~會匹配最近的小版本依賴包，比如~1.2.3會匹配所有1.2.x版本，但是不包括1.3.0...

lvzishen 2019-08-22 15:10 評論0 收藏0