gulp前端自動化構建工具（四）：gulp檔案路徑處理模組

阿新 • • 發佈：2019-01-15

本篇前言

上一篇介紹了本工具的獨立配置檔案，歡迎閱讀

本篇還是先把gulpfile.js執行所用的一個方法模組展示出來，模組主要接收gulp.src()中檔案物件，對檔案自身所在的物理路徑及其內部資源引用的路徑進行處理，程式碼中我有做詳細的註釋，包括方法的單獨作用演示。

本模組牽扯到了config-tool.js和config-apps.js兩個配置檔案，檢視上一篇文章即可。

模組程式碼如下：

var path = require('path'),
    toolConfig = require('./config-tool.js'), // 工具配置
    appsConfig = require('./config-apps.js'), // 應用配置
    COMPILE = toolConfig.compile, // 獲取工具配置的設定的所有需編譯項
    ROOT = toolConfig.root, // 獲取本工具所在物理路徑
    SRCDIR = appsConfig.conf().srcDir, // 獲取應用配置中的開發版本目錄名
    SRCHTMLDIR = appsConfig.conf().srcHtmlDir, 
    SRC_STATIC_DIR = appsConfig.conf().srcStaticDir, // 獲取應用配置中的開發版本static目錄名
    DIST_STATIC_DIR = appsConfig.conf().distStaticDir, // 獲取應用配置中的開發版本static目錄名
    DIST_STATIC_DOMAIN = appsConfig.conf().distStaticDomain, // 獲取應用配置中的開發版本static使用域名
    HAS_DIST_STATIC_DOMAIN = appsConfig.hasDistStaticDomain(); //獲取應用配置中生產版本否存在static域名

var fileAttr = function(){};
fileAttr.prototype.get = function() {
    var src = arguments[0], // 獲取檔案完成物理路徑
        arg = arguments[1], // 獲取檔案轉換所需型別
        srcArr,
        allName,
        nameArr,
        fileDir;
    src = src.replace(/\\/g, "/"); // 替換目錄符"\"成"/" 結果如：E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx
    src = fileDir = src.replace(ROOT, ""); // 先替換物理路徑目錄 結果如：/src/html/app1/js/jsx/index.jsx
    src = src.replace(SRCDIR + '/', ""); // 替換src目錄 結果如：/html/app1/js/jsx/index.jsx
    srcArr = src.split('/'); // 切割成陣列 結果如：[ 'html', 'app1', 'js', 'jsx', 'index.jsx' ]
    allName = srcArr[srcArr.length - 1].toString(); // 獲取帶字尾檔名 結果如：index.jsx
    nameArr = allName.split('.'); //切割index.jsx 結果如：[ 'index', 'jsx' ]
    var result;
    switch(arg){
        case 'fileSrcArr':
            result = srcArr; // 獲取檔案路徑陣列 如：[ 'html', 'app1', 'js', 'jsx', 'index.jsx' ]
            break;
        case 'fileName':
            result = allName.replace('.'+nameArr[nameArr.length - 1],''); // 獲取檔名 如：index
            break;
        case 'fileSuffix':
            result = nameArr[nameArr.length - 1].toString(); // 獲取檔案字尾 如：jsx/js/css
            break;
        case 'fileNewSrc':
            result = fileDir; // 獲取檔案完成路徑 如： 如：src/html/app1/js/jsx/index.jsx
            break;
        case 'fileDir':
            result = fileDir.replace(allName,''); // 獲取檔案所在路徑 如：src/html/app1/js/jsx/
            break;
        case 'fileModDir': // 獲取檔案路徑中的專案資訊
            var flog = false,
                cdir;
            for (var key in COMPILE) { // 提取編譯目錄為擷取右邊界
                var cPath = COMPILE[key].path,
                    cPathArr = cPath.split('/'); // 獲取編譯目錄名
                if (src.indexOf('/'+ cPathArr[0] +'/') !== -1) {
                    cdir = cPathArr[0];
                    flog = true;
                    break;
                }
            }
            result = flog ? src.substring(0, src.indexOf('/'+ cdir +'/')) : src.replace(allName, ''); 
            // ↑ 如果編譯名存在，則以編譯目錄名作為右邊界，擷取當前檔案物件的目錄結構作丟擲。
            // 如：src為“/html/app1/js/jsx/index.jsx”，遍歷到"jsx"的編譯目錄後，丟擲“/html/apps1/js/”
            // 注：左邊界沒有擷取，還是包含“/html/”本處丟擲到gulpfile有多種用途
            break;
        default:
            console.log("獲取檔案屬性時發生錯誤，請檢查檔案路徑是否正確！");
            return false;
    }
    return result;
};
/**
 * 獲取檔案路徑（去除根目錄）
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  src/html/app1/js/jsx/index.jsx
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  src/html/app1/js/index.js
 */
fileAttr.prototype.newSrc = function(){
	var src = arguments[0],
		that = this;
	return that.get(src,'fileNewSrc'); 
};
/**
 * 獲取檔名
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  index
 * E:/gitwww/demo/gulp/src/html/app1/js/index.min.js  ===>  index.min
 */
fileAttr.prototype.name = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileName');
};
/**
 * 獲取檔案格式字尾
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  jsx
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  js
 */
fileAttr.prototype.suffix = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileSuffix');
};
/**
 * 獲取檔案所在目錄
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  src/html/app1/js/jsx/
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  src/html/app1/js/
 */
fileAttr.prototype.dir = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileDir');
};
/**
 * 獲取檔案所在的模組
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  html/app1/js/
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  html/app1/js/
 */
fileAttr.prototype.modDir = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileModDir');
};

//針對dist版，修改檔案引用路徑
fileAttr.prototype.changePath = function() {
    var that = this;
        src = arguments[0], // 引用資源的URL
    	pageRoot = arguments[1]; //當前頁面的路徑
    /**
     * 引用域或cdn的資源
     * 
     * config-apps.js設定distStaticDomain域名為"http://localhost:8871"時，如下：
     * 
     * http://localhost/jquery/3.0.0/jquery.js => http://localhost:8871/jquery/3.0.0/jquery.js
     * http://localhost:8080/jquery/3.0.0/jquery.js => http://localhost:8871/jquery/3.0.0/jquery.js
     * //cdn.bootcss.com/jquery/3.0.0/jquery.js => //cdn.bootcss.com/jquery/3.0.0/jquery.js
     * 
     * 未設定域名時：
     * 
     * http://localhost/jquery/3.0.0/jquery.js => http://localhost/jquery/3.0.0/jquery.js
     * http://localhost:8080/jquery/3.0.0/jquery.js => http://localhost:8080/jquery/3.0.0/jquery.js
     * //cdn.bootcss.com/jquery/3.0.0/jquery.js => //cdn.bootcss.com/jquery/3.0.0/jquery.js
     */
    if (src.substring(0, 4) === 'http' || src.substring(0, 2) === '//') {
        if(HAS_DIST_STATIC_DOMAIN && src.indexOf("localhost") !== -1 && src.indexOf(DIST_STATIC_DOMAIN) === -1){
            //使用了localhost域，但與dist域的埠不一致，有可能是src資源域。
            var port = DIST_STATIC_DOMAIN.substring(DIST_STATIC_DOMAIN.indexOf('t:')+2,DIST_STATIC_DOMAIN.length+1);
            //存在埠號
            if(src.indexOf('t:') !== -1){ 
                var a = src.substring(src.indexOf("//")+2,src.length+1);
                var b = [];
                b = a.split('/');
                b[0] = "localhost:"+port;
                a = b.join('/');
                src = "http://"+a;
            }
            //不存在埠號
            else{
                src = src.replace("localhost","localhost:"+port);
            }
        }
        return src; 
    }
    /**
     * 引用本地的位置為公共資源目錄
     * 
     * config-apps.js設定distStaticDomain域名為"http://localhost:8871"時，如下：
     * 
     * /static/path/to/file/demo.js => http://localhost:8871/path/to/file/demo.js
     * ../../../static/path/to/file/demo.js => http://localhost:8871/path/to/file/demo.js
     *
     * 未設定域名時：
     * 
     * /static/path/to/file/demo.js => /static/path/to/file/demo.js
     * ../../../static/path/to/file/demo.js => /static/path/to/file/demo.js
     */
    else if (src.indexOf(SRC_STATIC_DIR) !== -1) {
        DIST_STATIC_DOMAIN = HAS_DIST_STATIC_DOMAIN ? DIST_STATIC_DOMAIN : '/'+ DIST_STATIC_DIR;
        src = src.substring(src.indexOf(SRC_STATIC_DIR) + SRC_STATIC_DIR.length, src.length+1);
        return DIST_STATIC_DOMAIN + src;
    }
    /**
     * 引用的本地位置為模組自身資源目錄
     * 
     * config-apps.js設定distStaticDomain域名為"http://localhost:8871"時，如下：
     * 
     * ./js/demo.js => http://localhost:8871/apps/app1/js/demo.js
     * js/demo.js => http://localhost:8871/apps/app1/js/demo.js
     *
     * 未設定域名時：
     * 
     * ./js/demo.js => /static/apps/app1/js/demo.js
     * js/demo.js => /static/apps/app1/js/demo.js
     */
    else { 
        DIST_STATIC_DOMAIN = HAS_DIST_STATIC_DOMAIN ? DIST_STATIC_DOMAIN : '/'+ DIST_STATIC_DIR;
        src = src.substring(0,2) === './' ? src.substring(2, src.length + 1) : src ;
        var thisMod = that.modDir(pageRoot);
            thisMod = thisMod.replace(SRCHTMLDIR+'/','');
        return DIST_STATIC_DOMAIN + '/apps/' + thisMod + src;
    }
    
}
/*console.log(fileAttr.prototype.newSrc('E:/gitwww/demo/gulp/src/html/app1/js/index.min.js'));
console.log('changePath:http://localhost/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('http://localhost/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:http://localhost:8080/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('http://localhost:8080/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath://cdn.bootcss.com/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('//cdn.bootcss.com/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:/static/path/to/file/demo.js => '+ fileAttr.prototype.changePath('/static/path/to/file/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:../../../static/path/to/file/demo.js => '+ fileAttr.prototype.changePath('../../../static/path/to/file/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:./js/demo.js => '+ fileAttr.prototype.changePath('./js/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:js/demo.js => '+ fileAttr.prototype.changePath('js/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));*/
module.exports = new fileAttr();

gulp前端自動化構建工具（四）：gulp檔案路徑處理模組

本篇前言上一篇介紹了本工具的獨立配置檔案，歡迎閱讀本篇還是先把gulpfile.js執行所用的一個方法模組展示出來，模組主要接收gulp.src()中檔案物件，對檔案自身所在的物理路徑及其內部資源引用的路徑進行處理，程式碼中我有做詳細的註釋，包括方法的單獨作用演示。本

gulp自動化構建工具（一）：gulp入門

寫在前面最近在學習web前端，剛好學習到gulp構建工具，就順便寫一寫筆記，當做一次簡單的練手。由於經驗缺乏，本文可能在某些地方做得不那麼細緻和準確，還望大家指正。 gulp介紹關於gulp構建工具就不多加贅述了，不熟悉的小夥伴可以自行google或者

gulp構建專案（三）：gulp-watch監聽檔案改變、新增、刪除

一、gulp.watch()功能介紹舉例說明：當’./src/*.html’發生變化時，執行’html’任務，同時重新整理瀏覽器。如下： gulp.task('watch', function(){ gulp.watch('./src/*.

webUI自動化測試框架（四）：程式碼分層-操作層及用例層

前面將基礎打好了，接下來就是具體的使用了，業務層主要是頁面中的各種業務操作，如登入，修改使用者資訊等，我們把這些操作都封裝在業務類中，如登入操作，我們把它封裝成一個類，登入的大致流程為開啟登入頁，輸入使用者名稱密碼，點選登入按鈕，這樣一個完整的登入業務就算完成了。那為什麼

Android記憶體分析工具（四）：adb命令

1.adb shell dumpsys meminfo yourpakagename Pss對應的TOTAL值：記憶體所實際佔用的值。 Dalvik Heap Size:從RuntimetotalMemory()獲得，DalvikHeap總共的記憶體大小。 Dalvik

JUnit自動化單元測試（四）：@RunWith測試套件執行器的使用

一些常用的測試方法前面已經說了，但有人又說了，JUnit為專案裡每個類都建立一個對應的測試類，雖然一次能把類裡面所有的方法都測試一遍，但是，我一個專案有可能有上千百個類，總不能每個類都點一下進行測試吧。沒錯，@RunWith註解就是為了這種情況，我們先宣告用

前端零基礎入門（四）：第一個HTML頁面

前面說到了html,css,js三者之間的關係接下來我們就來看看html到底長什麼樣子。隨便開啟一個編輯器，然後在檔案那裡點選新建html檔案，看到的程式碼大多如下： <!DOCTYPE html> <html lang="en"

thinkphp5.0學習（四）：入口檔案、路由模式、路由設定和url生成

一、路由的作用簡化URL地址，方便記憶有利於搜尋引擎的優化二、入口檔案前後臺分離在網站public目錄下（專案\public）新建admin.php 開啟admin.ph

Java虛擬機器（四）：Class檔案結構及位元組碼指令

接下來的兩個位元組為this_class項，它是一個對常量池的索引。在this_class位置的常量池入口必須為CONSTANT_Class_info表。該表由兩個部分組成——標籤和name_index。標籤部分是一個具有CONSTANT_Class值的常量，在name_index位置的常量池入口為一

前端自動化構建工具Webpack開發模式入門指南（網上看到的，寫得很詳細）

Webpack Webpack是時下最流行的模組打包器它的主要任務就是將各種格式的JavaScript程式碼，甚至是靜態檔案進行分析、壓縮、合併、打包，最後生成瀏覽器支援的程式碼特點：程式碼拆分方案：webpack可以將應用程式碼拆分成多個塊，每個塊包含一個或

前端自動化構建工具-gulp

出現 ssa uglify 提醒連接變化監聽前端復雜 gulp 和grunt這兩個是我知道的自動構建工具，但是說實話都沒在項目中用過，不太清楚自動化構建是什麽意思， 1、grunt和gulp有什麽相同點和不同點？　　（1）、易於使用：采用代碼優於配置策略，gul

前端自動化構建工具Gulp簡單入門

margin 構建工具 function col 處理 .com order lis web 昨天聽同事分享了Gulp的一些簡單使用，決定自己也試一試。一、安裝　　gulp是基於nodejs的，所以要先下載安裝node（直接搜node，在官網下載就好了）　　1、全局安

前端自動化構建工具——gulp

操作過程：需要配置檔案後才能執行 $ gulp命令（1）配置一些基本資訊，執行命令：$ npm init 在git指令中，對下面每一項進行配置，注意：GitHub專案的資訊與配置檔案一一對應，如果先關聯了GitHub專案，那麼下面的基本配置中的GitHub專案資訊將

gulp.js 自動化構建工具學習入門

http pat 圖片壓縮 pan 同時 sset ati 獲取文件 sheet 一、基本安裝 1、安裝gulp 1 $ npm install --global gulp 2、作為項目的開發依賴安裝 1 $ npm install --save-dev gulp

構建NetCore應用框架之實戰篇（四）：BitAdminCore框架1.0登錄功能細化及技術選型

1.0 dmi 也會繼承 blank bit 技術選型 cor 我會本篇承接上篇內容，如果你不小心點擊進來，建議從第一篇開始完整閱讀，文章內容繼承性連貫性。構建NetCore應用框架之實戰篇系列一、BitAdminCore框架1.0版本 1、1.0版本是指

接口自動化平臺搭建（四），自動化項目Jenkins持續集成

工作量我們接口自動化 com 功能 http root kill png 一、Jenkins的優點 1、傳統網站部署流程 ??一般網站部署的流程這邊是完整流程而不是簡化的流程需求分析—原型設計—開發代碼—內網部署-提交測試—確認上線—備份數據—外網更新-最終測試，

前端自動化構建工具

urn 自身合並文件 limit ase 有效 www. javascrip 路徑配置全局安裝是把包安裝在Node安裝目錄下的node_modules文件夾中，一般在 \Users\用戶名\AppData\Roaming\ 目錄下，可以使用npm root -g查看全局

Web前端-Html部分筆記（四）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。表格標籤

HTTP介面自動化經驗總結（四）Okhttp3 介面測試用例編寫

經過前面幾次的分享，我們已經有了方法和結果，那麼這篇文章我們就來寫測試用例。首先我們新建一個TestNG class，名字為APITest,繼承我們的依賴方法DependeicesMethod 1.get介面測試 //測試Get方法,其餘校驗請自行新增 @Test

Python自動化學習筆記（四）——Python資料型別（集合set,元組tuple）、修改檔案、函式、random常用方法

1.修改檔案的兩種方式 1 #第一種 2 with open('users','a+') as fw: #用a+模式開啟檔案，使用with這種語法可以防止忘記close檔案 3 fw.seek(0) #移動檔案指標到最前面，然後才能讀到內容 4 result=fw.read()

gulp前端自動化構建工具（四）：gulp檔案路徑處理模組

相關推薦