Sails 項目 assets/dependencies 目錄客戶端依賴的正確存放位置與加載順序機制【免費下載鏈接】sailsRealtime MVC Framework for Node.js項目地址: https://gitcode.com/gh_mirrors/sa/sails導(dǎo)讀本文聚焦 Sails 應(yīng)用解剖結(jié)構(gòu)中的assets/dependencies/目錄說明它的準(zhǔn)確定位存放 Vue.js、Bootstrap、jQuery 等第三方客戶端依賴而非團隊自研代碼、先于其他資源加載的約定行為以及這一行為背后的資產(chǎn)管道編排機制——tasks/pipeline.js與sails-linkerGrunt 任務(wù)的完整配合流程。讀完本文你將掌握在 Sails 項目中正確組織前端第三方依賴、控制其注入順序、并在開發(fā)與生產(chǎn)環(huán)境下分別處理這些資源的具體方法。一、assets/dependencies/是什么在 Sails 新生成應(yīng)用的默認結(jié)構(gòu)中assets/目錄承載了應(yīng)用需要靜態(tài)托管的所有文件應(yīng)用啟動后assets/newFolder/data.txt這樣的文件可通過http://localhost:1337/newFolder/data.txt直接訪問見 assets 目錄說明。而其中的assets/dependencies/子目錄有一條非常明確的規(guī)則只要是你或你的團隊編寫的代碼就不屬于這個文件夾。assets/dependencies/是專門用來存放客戶端第三方依賴的地方例如 Vue.js、Bootstrap 或 jQuery。這個文件夾里可以包含客戶端 JavaScript 文件、樣式表甚至圖片Web App 模板中即有示例見 dependencies 目錄說明。這一約定把兩類性質(zhì)完全不同的前端資源區(qū)分開來目錄存放內(nèi)容示例assets/dependencies/第三方、來自外部的客戶端依賴Vue.js、Bootstrap、jQuery、Socket.IO 客戶端assets/js/、assets/styles/應(yīng)用自身的客戶端代碼自研模塊、業(yè)務(wù)邏輯、自定義樣式從源碼結(jié)構(gòu)看這種分離是 Sails 約定優(yōu)于配置 哲學(xué)的體現(xiàn)框架通過目錄位置即可推斷資源的性質(zhì)而不需要額外的聲明文件。二、核心約定依賴先于其他資源加載assets/dependencies/中最關(guān)鍵的行為約定是assets/dependencies/文件夾中的 JavaScript 文件和樣式表會最先被加載排在你的其他資源之前。這一約定行為由 tasks/pipeline.js 編排。如果你需要調(diào)整行為例如讓某些客戶端依賴必須比其他依賴更早加載就應(yīng)該去修改該文件。這條約定背后是一個簡單而重要的現(xiàn)實需求第三方依賴如 jQuery通常是應(yīng)用自身腳本的前置條件——自研代碼在運行時引用了 jQuery 等全局對象因此必須保證依賴先于應(yīng)用腳本注入頁面。三、底層機制pipeline.js 與 sails-linker 的配合3.1 資產(chǎn)管道Asset PipelineSails 的資產(chǎn)管道是組織將要被注入到視圖中的資產(chǎn)的地方位于tasks/pipeline.js文件見 Task automation 文檔。配置該文件使用 Grunt 的任務(wù)文件配置語法與通配符/glob/splat 匹配模式內(nèi)容分為三個部分要注入的 CSS 文件CSS Files to Inject將作為link標(biāo)簽注入 HTML插入位置是視圖中出現(xiàn)的!--STYLES--!--STYLES END--注釋之間要注入的 JavaScript 文件JavaScript Files to Inject將作為script標(biāo)簽注入 HTML插入位置是!--SCRIPTS--!--SCRIPTS END--注釋之間。文件按數(shù)組中的順序注入因此依賴文件的路徑必須放在依賴它們的文件之前——這正是dependencies/目錄約定與 pipeline 數(shù)組順序兩個機制相互呼應(yīng)的關(guān)鍵點要注入的模板文件Template Files to Inject會被編譯為 JST 函數(shù)并放入jst.js文件該文件再以script標(biāo)簽注入到!--TEMPLATES--!--TEMPLATES END--注釋之間。pipeline.js 還支持 Grunt 風(fēng)格的通配符表達式來匹配多個文件并用表達式前的!來排除文件見 pipeline.js 文檔。3.2 sails-linker自動注入腳本與樣式標(biāo)簽負責(zé)真正執(zhí)行注入動作的是名為sails-linker的 Grunt 任務(wù)其配置位于 tasks/config/sails-linker.js。它的功能是自動向指定的 HTML 和/或 EJS 文件注入script標(biāo)簽和link標(biāo)簽通過配置中的startTag和endTag分隔符確定插入點。如果某個腳本或樣式表的注入是僅在包含!--SCRIPTS--!--SCRIPTS END--和/或!--STYLES--!--STYLES END--標(biāo)簽的文件中進行的見 Default tasks 文檔。這些標(biāo)簽包含在新 Sails 項目默認的views/layouts/layout.ejs文件中。如果不希望項目使用 linker直接移除這些標(biāo)簽即可。linkAssets任務(wù)列表本身不直接被使用它是default任務(wù)列表和watch任務(wù)的支撐模塊僅在grunt-sails-linker包啟用時生效見 linkAssets.js 文檔。四、開發(fā)與生產(chǎn)環(huán)境的差異處理sails-linker在兩種環(huán)境下行為不同見 sails-linker.js 文檔4.1 開發(fā)模式默認默認情況下會為以下內(nèi)容注入標(biāo)簽應(yīng)用的客戶端 JavaScript 文件CSS 樣式表templates/目錄下預(yù)編譯的客戶端 HTML 模板詳見jst任務(wù)。此外如果assets/styles/importer.less存在它會先被編譯為 CSS然后注入對應(yīng)的link標(biāo)簽如果assets/js/中存在 CoffeeScript 文件它們同樣會被編譯為 JavaScript 后注入。4.2 生產(chǎn)模式NODE_ENVproduction所有樣式表包括全部.css文件和assets/styles/importer.less被壓縮合并為單個.css文件由tasks/config/cssmin.js任務(wù)處理所有客戶端腳本包括.js和.coffee文件被壓縮合并為單個.js文件由tasks/config/uglify.js任務(wù)處理預(yù)編譯的客戶端 HTML 模板JST也可以在sails-linker:prodJs運行時與其他腳本一并壓縮但由于這可能改變前端代碼的行為默認不包含。如果使用 JST 模板并希望它們進入壓縮包從tasks/register/prod.js的 tasklist 數(shù)組中移除clientSideTemplates然后修改tasks/config/uglify.js把編譯產(chǎn)物.tmp/public/jst.js加入其src數(shù)組。這種差異保證了開發(fā)環(huán)境的熱更新與可讀性同時讓生產(chǎn)環(huán)境獲得更小的體積與更少的請求數(shù)。五、觸發(fā)機制何時執(zhí)行這些任務(wù)Sails 會在特定命令下自動運行tasks/register/中的任務(wù)見 tasks 目錄文檔 與 Task automation 文檔命令執(zhí)行的任務(wù)說明sails liftdefaulttasks/register/default.js編譯 LESS、CoffeeScript、客戶端 JST 模板并從動態(tài)視圖和靜態(tài) HTML 頁面自動鏈接它們sails lift --prodprodtasks/register/prod.js與default職責(zé)相同另加腳本與樣式表的壓縮sails wwwbuildtasks/register/build.js將資產(chǎn)編譯到www子目錄而非.tmp/public便于用 Apache 或 Nginx 托管sails www --prodbuildProdtasks/register/buildProd.js同build并額外做資源優(yōu)化在開發(fā)模式下watch任務(wù)會監(jiān)聽assets/文件夾的文件變更并重新運行相應(yīng)任務(wù)如 LESS 編譯讓你無需重啟 Sails 服務(wù)器即可看到資產(chǎn)變化見 Default tasks 文檔。六、實戰(zhàn)向 assets/dependencies 添加第三方依賴以在頁面中使用 jQuery 為例遵循 Sails 的約定流程將 jQuery 文件放入assets/dependencies/例如assets/dependencies/jquery.min.js在tasks/pipeline.js的jsFilesToInject數(shù)組中將其路徑放在應(yīng)用自身腳本之前確保注入順序正確確保布局文件views/layouts/layout.ejs中包含!--SCRIPTS--!--SCRIPTS END--注釋標(biāo)記sails-linker會在該位置注入script標(biāo)簽sails lift后依賴會在應(yīng)用腳本之前被注入頁面。如需調(diào)整默認順序例如讓某些依賴先于其他依賴加載直接修改tasks/pipeline.js中數(shù)組的排列順序即可——這是官方文檔明確指出的定制入口見 dependencies 目錄說明。如果想在項目層面完全掌控依賴的引入也可以不使用自動注入手動在視圖中書寫script標(biāo)簽。此時應(yīng)把對應(yīng)文件從 pipeline 中排除避免重復(fù)加載。七、內(nèi)置依賴示例sails.io.js在默認的 Sails 新應(yīng)用中assets/dependencies/部分版本位于assets/js/dependencies/參見 socket client 文檔會內(nèi)置一個名為sails.io.js的文件。它是 Sails 提供 內(nèi)建 WebSocket 功能的關(guān)鍵見 sails.io.js 目錄說明它為 Socket.IO 添加若干自定義方法這些方法允許你在 Socket.IO 之上模擬 REST 客戶端接口向 Sails 發(fā)送和接收 Socket.IO 消息其 API 模仿了你可能熟悉的 jQuery$.ajax模式。也就是說在瀏覽器中執(zhí)行io.socket.post(/user)與向同一路由發(fā)起 HTTP POST 請求在 Sails 應(yīng)用內(nèi)的路由方式完全相同。底層原理是sails.io.js發(fā)出保留名稱的 Socket.IO 消息Sails 解釋后按應(yīng)用的路由與藍圖配置路由到對應(yīng)的 policies/controllers 等見 socket client FAQ。注意如果使用默認的 Grunt 資產(chǎn)管道自動注入腳本標(biāo)簽并且需要通過 HTML 屬性或io.sails編程方式配置該客戶端如設(shè)置autoConnect、environment、headers、url建議將sails.io.js從pipeline.js中排除改為顯式script標(biāo)簽引入——這樣你的配置代碼會在 eager 自動連接 socket 開始連接之前執(zhí)行詳見 socket client 配置章節(jié)。八、常見問題與定制建議Q能否完全不用 Grunt可以。刪除項目的 Gruntfile 或禁用 Grunt hook 即可見 tasks 目錄文檔也可以用sails new --withoutgrunt生成不含 Grunt 的應(yīng)用或用sails new myCoolApi --no-frontend完全省略assets文件夾與前端導(dǎo)向的 Grunt 任務(wù)。Qpipeline.js 中能否使用通配符可以。Grunt 風(fēng)格的通配符/glob/splat 表達式可用于匹配多個文件!前綴用于排除文件tasks/config/下的任務(wù)配置文件本身也使用同樣的匹配模式見 pipeline.js 文檔 與 Task automation 文檔。Q不依賴自動鏈接時怎么辦如果不想依賴自動資產(chǎn)鏈接automatic asset linking可以安全地忽略pipeline.js見 pipeline.js 文檔改為在視圖中手動書寫資源標(biāo)簽。Q想替換默認的模板編譯引擎以 Handlebars 替換默認的 underscore 模板為例需要四步安裝grunt-contrib-handlebars、在tasks/config/handlebars.js中配置任務(wù)、修改tasks/pipeline.js中的模板 glob 模式、把tasks/register/compileAssets.js與tasks/register/syncAssets.js中的jst任務(wù)替換為handlebars任務(wù)最后卸載grunt-contrib-jst完整示例見 Task automation 文檔。九、總結(jié)assets/dependencies/是 Sails 應(yīng)用解剖結(jié)構(gòu)中一個雖小但定位明確的目錄它是第三方客戶端依賴的專屬家園通過tasks/pipeline.js中數(shù)組的有序排列與sails-linker的自動注入機制實現(xiàn)了依賴先于應(yīng)用資源加載的約定行為。理解這一目錄的邊界不放團隊自研代碼與其背后的管道機制pipeline 順序 → sails-linker 注入 → 開發(fā)/生產(chǎn)差異化處理是掌控 Sails 前端資產(chǎn)工作流的基礎(chǔ)。相關(guān)文檔可繼續(xù)深入assets 目錄總覽、pipeline.js、sails-linker 配置、默認 Grunt 任務(wù)、任務(wù)自動化、socket 客戶端參考?！久赓M下載鏈接】sailsRealtime MVC Framework for Node.js項目地址: https://gitcode.com/gh_mirrors/sa/sails創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考