Javascript模塊化開發3——Grunt之預處理

来源:https://www.cnblogs.com/studynote/archive/2019/11/19/11890088.html
-Advertisement-
Play Games

一、grunt預處理簡述 grunt的註冊任務函數本身會對傳入的參數和配置對象里的相關屬性進行一定的預處理,方便任務函數進行操作。 grunt的registerTask方法和registerMultiTask方法會進行不同的預處理。 二、預處理參數 grunt命令通過grunt taskname:a ...


一、grunt預處理簡述

grunt的註冊任務函數本身會對傳入的參數和配置對象里的相關屬性進行一定的預處理,方便任務函數進行操作。
grunt的registerTask方法和registerMultiTask方法會進行不同的預處理。

二、預處理參數

grunt命令通過grunt taskname:arg1:arg2形式的腳本來傳入參數。
grunt會給task對象增加nameArgs屬性,其值為"taskname:arg1:arg2"
grunt會給task對象增加name屬性,其值為"taskname"
grunt會給task對象增加args屬性,registerTask方法下其值為 [ 'arg1', 'arg2' ],registerMultiTask方法下其值為 ['arg2' ]
grunt會給task對象增加flags屬性,registerTask方法下其值為 [ arg1:true, arg2:true ],registerMultiTask方法下其值為 [arg2::true]
grunt會將args作為參數傳給任務的執行函數,registerTask方法下會將arg1,arg2作為執行函數的參數,registerMultiTask方法下會將arg2作為執行函數的參數。

三、registerTask預處理配置對象

grunt會為task對象新增options方法,該方法可以用來獲取配置參數下與task名稱對應屬性下options屬性中的值。例如

module.exports = function(grunt) {
    grunt.initConfig({
        hello: {
            options: {
                who: 'Kate'
            }
        }
    });
    grunt.registerTask("hello", function() {
        var options = this.options({ who: 'unknown' });
       console.log('hello,'+options.who); //hello,Kate
    });
};

四、registerMultiTask預處理配置對象

grunt會為task對象新增options方法,該方法除了會獲取配置參數下與task名稱對應屬性下options屬性中的值,其值還會進一步被目標級的options對象的屬性覆蓋,例如

module.exports = function(grunt) {
  grunt.initConfig({
    hello: {
      options: {
        who: 'Kate'
      },
      Jingle:{
        options: {
          who: 'Jingle'
        }
      }
    }
  });
  grunt.registerMultiTask("hello", function() {
    var options = this.options({ who: 'unknown' });
    console.log('hello,'+options.who); //hello,Jingle
  });
};

複合任務會依次執行其所包含的所有除了options以外的已命名的子屬性。相應的,註冊複合任務的方法也會依次預處理除了options以外的已命名的子屬性。
每輪任務中,grunt會為task對象賦予target屬性,target屬性值為配置對象當前正被遍歷的目標的名稱。data屬性值為配置對象當前正被遍歷的目標對應的數據。如上例中,在子任務Log:Jingle中,target為Jingle,data為:

{
  options: {
    who: 'Jingle'
  }
}

由於大多的任務都是執行文件操作,Grunt的註冊複合任務的方法中會儘量的將data進一步處理,將其支持的各種格式自動標準化為一個唯一的格式:文件數組格式並將其賦值給任務對象的files屬性。
Grunt支持如下的文件模式:

1.最簡格式

這個是定義文件數組的最簡單的模式,直接定義文件字元串或文件名數組,對應files[0].src, target屬性值對應files[0].dest。該格式不支持附加屬性。

2.簡潔格式

簡潔格式(Compact Format)允許單獨定義src或dest,支持附加屬性,直接對應files[0]。

3.文件對象格式

文件對象格式(Files Object Format)支持多個src-dest映射,屬性名是目標文件,屬性值是源文件。可利用該格式指定多個映射,但是不支持附加屬性。

4.文件數組格式

文件數組格式(Files Array Format)是files屬性所使用的格式,支持附加屬性,如果不設置expand為true,則相當於將data直接賦值給files。

5.實例

module.exports = function(grunt) {
  grunt.initConfig({
    Log: {
      jian1:"1.txt", //最簡格式
      jian2:["1.txt","2.txt"], //最簡格式
      compact:{dest:"/dist",prop1:true}, //簡潔格式
      fileobject: { //文件對象格式
        files: {
          'dest/a.js': ['src/aa.js', 'src/aaa.js'],
          'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
        }
      },
      filearray: {  //文件數組格式
        files: [
          {src: ['src/a.js', 'src/b.js'], dest: 'dest/a/', nonull:true,prop1:true},
          {src: ['src/a1.js', 'src/b1.js'], dest: 'dest/a1/', filter: 'isFile'}
        ]
      }
    }
  });
  grunt.registerMultiTask("Log", function() {
    console.log(this.files); 
  });
};

輸出為:

[
  {
    src: [Getter],
    dest: 'jian1',
    orig: { src: [Array], dest: 'jian1' }
  }
]

Running "Log:jian2" (Log) task
[
  {
    src: [Getter],
    dest: 'jian2',
    orig: { src: [Array], dest: 'jian2' }
  }
]

Running "Log:compact" (Log) task
[
  {
    dest: [ '1.txt' ],
    prop1: true,
    orig: { dest: '/dist', prop1: true }
  }
]

Running "Log:fileobject" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a.js',
    orig: { src: [Array], dest: 'dest/a.js' }
  },
  {
    src: [Getter],
    dest: 'dest/a1.js',
    orig: { src: [Array], dest: 'dest/a1.js' }
  }
]

Running "Log:filearray" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a/',
    nonull: true,
    prop1: true,
    orig: { src: [Array], dest: 'dest/a/', nonull: true, prop1: true }
  },
  {
    src: [Getter],
    dest: 'dest/a1/',
    filter: 'isFile',
    orig: { src: [Array], dest: 'dest/a1/', filter: 'isFile' }
  }
]

五、動態構建文件數組

當你希望處理大量的單個文件時,可以通過匹配和一些替換操作來動態構建一個文件列表。只有Compact和Files Array文件映射格式支持這種動態構建文件數組的方式,這時需要在src中增加一些通配符,並附加一些額外的屬性,最重要的是,我們需要將expand設置為true來開啟這種操作。grunt預設支持的屬性有:

1.src(必須)

定義源文件。可為字元串或數組,可包含通配符。
簡單常用通配符如下:

  • *匹配任意數量的字元,但不匹配 /
  • ?匹配單個字元,但不匹配 /
  • **匹配任意數量的字元,包括 /,只要它是路徑中唯一的一部分
  • {}允許使用一個逗號分割的字元列表,用來匹配字元列表中的任一個字元,如{a,b}匹配a或者b
  • !在模式的開頭用於排除該匹配模式所匹配的任何文件,例如
// 除bar.js之外的所有的.js文件,按字母順序排序:
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// 按字母順序排序的所有.js文件,但是bar.js在最後。
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

2.dest(必須)

目標文件路徑首碼。只能為字元串

3.cwd

所有src指定的匹配都將相對於此處指定的路徑(但不包括此路徑)

{cwd:'foo', src: ['*.js', '!bar.js'], dest: ...}

相當於

{src: ['foo/*.js', '!foo/bar.js'], dest: ...}

4.ext

對於生成的dest路徑中所有實際存在文件,均使用這個屬性值替換擴展名。

5.extDot

用於指定標記擴展名的英文點號的所在位置。可以賦值 'first' (擴展名從文件名中的第一個英文點號開始) 或 'last' (擴展名從最後一個英文點號開始),預設值為 'first'。

6.flatten

從生成的dest路徑中移除所有的路徑部分。

7.rename

對每個匹配的src文件調用這個函數(在重命名尾碼和移除路徑之後)。dest和匹配的src路徑將被作為參數傳入,此函數應該返回一個新的dest值。 如果相同的dest返回不止一次,那麼,每個返回此值的src來源都將被添加到一個數組中作為源列表。

8.filter

filter屬性對匹配到的源文件進行過濾,去除不符合條件的源文件。
filter屬性可定義為任意一個有效的fs.Stats方法名:

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: 'isFile',
    },
  },
});

或者定義你自己的filter函數,通過返回true或者false來保留或者過濾文件。下麵的例子會將字元串長度小於4的文件名過濾掉:

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return filepath.length >= 4;
      },
    },
  },
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [TOC] jQuery的補充 基本篩選器 屬性選擇器 表單選擇器 篩選器方法 下一個元素 上一個元素 父親元素 兒子和兄弟元素 操作標簽 樣式操作 樣式類 位置操作 尺寸 文本操作 HTML代碼 文本值 值 屬性操作 用於 和`radio` == 和`attr`的區別== 全稱 (屬性) 全稱 ( ...
  • [TOC] js BOM(瀏覽器對象模型) 由上圖可知,window對象是 BOM 的核心對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。 DOM是BOM的一部分 window對象 所有瀏覽器都支持window對象,它表示瀏覽器的介面。 常用window方法 ::瀏覽器視窗的內部 ...
  • 對象是無序屬性的集合,而這些屬性在創建是都帶有一些特征值(可以理解為屬性的屬性,天生自帶的),這些特征值是為了實現JavaScript引擎用的,因此JavaScript不能直接訪問。 JavaScript通過這些特征值來定義屬性的行為(屬性是否刪除,枚舉,修改等)。 例如,在全局定義的屬性是會掛載到 ...
  • 咚!channelartlist來啦!不瞭解的伙伴們快來看看把@所有人 ...
  • 1.body{margin:0;padding:0} 2.https://www.bootcdn.cn/normalize/ 複製link標簽引入 <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="styl ...
  • 一、單選題(共21題,每題5分) 1.為每一個指定元素的指定事件(像click)綁定一個事件處理器函數,下麵哪個是用來實現該功能的? A、trigger (type) B、bind(type) C、one(type) D、bind 參考答案:B 答案解析:暫無 2.哪一個html盒模型中的borde ...
  • 用原生JavaScript代替jQuery 前端發展很快,現代瀏覽器原生 API 已經足夠好用。我們並不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用場景大大減 ...
  • 1. ajax 1.1 什麼是ajax AJAX = 非同步的javascript和XML(Asynchronous Javascript and XML) 簡言之,在不重載整個網頁的情況下,AJAX通過後臺載入數據,併在網頁上進行顯示。 通過 jQuery AJAX 方法,您能夠使用 HTTP Ge ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...