gulp組織小型プロジェクト小記


現在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ファイルではなく、新しいリクエストを送信するようにしています.2つのシナリオがあります.
  • app.jsはapp-2 qweeになる.js
  • app.jsはappになる.js?v=wqe2434er3

  • 私が好きなのは後者の方法です.gulpにはgulp-version-numberのプラグインがありますが、テンプレートエンジンjinja2 flaskのフレームワークを採用して開発しているのでhtmlではこのようなものです.
    
    

    gulp-version-numberコンパイルで
    
    

    私が望むのは

    好奇心のあるあなたはきっと聞くことができて、どうして望んでいるのはそうではありませんか?url_for('static',filename='app.css?v=1624 df 4 fdca 2 e 5244636 c 2 bca 625276')}"実験によりurl_for出力結果で%3 Fとなり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=['"]?([^>'"]*)['"]?[^>]*>[^<]*<\/script>/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(/<img[^>]*>/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;
            }
        };</code></pre> 
     <p>  ,          :   ,     <br>package.json</p> 
     <pre><code>{
      "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"
      }
    }
    </code></pre> 
     <p>gulpfile.js</p> 
     <pre><code>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);
    });</code></pre> 
    </div>
                                </div>
                            </div>
                        </div>
                        <!--PC WAP    -->
                        <div id="SOHUCS" sid="1176970949585612800"></div>
                        <script type="text/javascript" src="/views/front/js/chanyan.js">