gulp插件(gulp-jmbuild)，用於WEB前端構建

源碼地址：https://github.com/jiamao/gulp-jmbuild

 https://github.com/jiamao/gulp-jmbuild

gulp-jmbuild

gulp插件，用於WEB前端構建

安裝

進入您作爲構建工具用的目錄

1.首先安裝gulp

$ npm install -g gulp
$ npm install --save-dev gulp

2.安裝其它依賴[q/gulp-jshint]。

$ npm install q
$ npm install gulp-jshint

3.安裝gulp-jmbuild

$ npm install gulp-jmbuild

示例

在構建目錄下建立 gbulpfile.js

var jshint = require('gulp-jshint');
var Q = require('q');
var gulp = require('gulp');
var path = require('path');

var jmbuild = require('gulp-jmbuild');

//配置文件
var config = {
    "debug": false,//若是是true,則不全合併和壓縮文件，也不會打md5碼,支持監聽
    //項目根路徑，後面的路徑基本都是相對於它的。
    "root": path.resolve('../'),   
    //構建目標目錄，相對於root
    "dest": "dist",
    //js文件構建目標目錄，相對於dest,,,若是你想把它放在不一樣的地方，能夠用相似於../這種改變根路徑的方法。
    "jsDest": "static/js",
    //html文件構建目標目錄，相對於dest
    "htmlDest": "",
    //css文件構建目標目錄，相對於dest
    "cssDest": "static/css",
    //JS文件基礎路徑段，主要用於模塊化提取模塊id用處，比例在static/js/test/a.js  構建時就會取static/js後的test/a作爲模塊id
    "jsBase": "static/js",
    //文件後綴的分隔符，例如：a.{md5}.js
    "separator": ".",
    //md5碼取多少位，
    "md5Size": 8,
    //JS須要構建的配置
    "js": [
        {
            //構建源，跟gulp的source方法保持一致，能夠是單個文件/目錄*.js/數組
            //如下全部類同
            "source": "static/js/*.js",
            //是否加上md5後綴,默認false
            'md5': true,
            //名稱擴展，會直接加到文件名後綴前,例如：a.324242.lc.js
            "expand": 'lc'
        },
        {
            "source": ["static/js/test/**/*.js"],
            //用於把source中的全部文件合併到同一個文件，並命名爲此配置值
            "concat": "t.js",
            'md5': true,
            //當前配置發佈位置，相對於jsDest配置，若是不配置則默認放到jsDest下。
            "dest": 'test'
        }
    ],
    "css": [
        {
            "source": "static/css/*.css",
            "md5": true
        }
    ],
    "html": [
        {
            "source": "index.html",
            //當有inline模塊化js文件時，理否把它依賴的模塊一同內嵌進來，默認爲false
            "includeModule": true
        }
    ],
    //普通文件構建，能夠用於圖片拷貝和打md5碼
    "files": [
        {
            "source": "static/img/*.*",
            "md5": true,
            "dest": "static/img"
        }
    ]
};

//語法檢測
gulp.task('jshint', function () { 
    var sources = [];
    if(config.js && config.js.length) {
        for(var i=0;i<config.js.length;i++) {
            if(typeof config.js[i] == 'string') {
                sources.push(config.js[i]);
            }
            else {
                if(Array.isArray(config.js[i].source)) {
                    sources = sources.concat(config.js[i].source);
                }
                else {                   
                    sources.push(config.js[i].source); 
                }
            }
        }
    }
    console.log('jshint:');
    return gulp.src(sources, {cwd:config.root})
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});


//生成壓縮JS任務
var jstasks = jmbuild.jsTask(gulp, config, ['jshint']);
//建立任務，用於執行前面建立的任務
gulp.task('minifyJS', jstasks,function (){
    console.log('minifyJS-start');
    var deferred = Q.defer();
    deferred.resolve();
    return deferred.promise;
});

//通常文件處理
var filetasks = jmbuild.fileTask(gulp, config, []);
gulp.task('cpFile', filetasks,function (){
    console.log('cpFile-start');
    var deferred = Q.defer();
    deferred.resolve();
    return deferred.promise;
});

//壓縮css
var csstasks = jmbuild.cssTask(gulp, config, ['cpFile']);
gulp.task('minifyCSS', csstasks,function (){
    console.log('minifyCSS-start');
    var deferred = Q.defer();
    deferred.resolve();
    return deferred.promise;
});

//生成html解析主任務
var htmlTasks = jmbuild.htmlTask(gulp, config, ['minifyJS', 'minifyCSS']);
gulp.task('parseHTML', htmlTasks, function (){
    var deferred = Q.defer();
    deferred.resolve();
    return deferred.promise;
});


gulp.task('default', ['jshint','minifyJS', 'cpFile', 'minifyCSS','parseHTML']);

View Code

 

運行

在gulpfile.js目錄下執行以下命令

$ gulp

用法

html構建時路徑處理說明：若是以 .或 / 開頭，則它相對的是構建配置 dest 目錄;

若是不是，則當爲 .js 就會以jsDest爲路徑，.css就會以cssDest配置路徑來計算絕對路徑。 若是以上條件都不符合，則以當前html文件目錄爲當前路徑來計算。

1.__pkg/__uri函數

當在html中使用__pkg('xxx')/__uri('XXX')時，構建時會被自動替換成對應文件路徑，若是有配置md5會自動帶上md5碼(配置在config的配置中)。 例如：

<link rel="stylesheet" href="__uri('static/css/style.css')" />  
<script src="__uri(static/js/a.js)"></script>
var a=__pkg('/static/js/a.js');
var t=__pkg('test/t.js');

 

構建後：

<link rel="stylesheet" href="static/css/style.95cc4059.css" />  
<script src="static/js/a.49ea7d65.js"></script>
var a="/static/js/a.49ea7d65.js";
var t="test/t.fbdd9f3d.js";

 

2.__inline函數

此函數爲把對應的文件內容（構建後的）內聯到當前html中。

!!#ff0000 注：若是當前html構建配置中有指定"includeModule": true 則當inline一個模塊化js文件時，會同時把它全部依賴js一塊兒內聯進來。!!

例如：

<style>
    __inline('/static/css/style.css')
</style>
<script>
__inline('test/t.js', 'a.js');
</script>

 

構建後：

<style>
    body,html{margin:0;padding:0}...略
</style>
<script>
define("a",[],function(n,a,i){a.run=function(){alert("i am a")}});
define("b",["./a"],function(n,i,a){var f=n("./a");i.init=function(){f.run("b")}});
define("test/c",["../b"],function(i,n,t){var b=i("../b");n.init=function(){b.init("b")}});
define("test/dir/d",["../../b"],function(i,n,t){var d=i("../../b");n.init=function(){d.init("d")}});
</script>

 

3.css中的import語法

當構建css文件時，會把@import url("./base.css?__inline");指定的文件合併到當前css中。