LESS-Middleware：Node.js 和 LESS 的完美搭配

　　LESS 是一個編寫 CSS 的很好的方式 ，讓你可以使用變數，嵌套規則，混入以及其它許多有用的功能，它可以協助您更好地組織你的 CSS 代碼。

　　最近我一直在研究 Node.js ，並想用  less-middleware 中介軟體，這樣我可以很容易的在我的應用程式中使用 LESS 了。配置好以後，LESS-Middleware 能夠自動處理編譯你的 LESS 代碼為 CSS 代碼。

 var lessMiddleware = require("less-middleware");app.use(lessMiddleware({src: __dirname + "/less",dest: __dirname + "/public/css",prefix: "/css",force: true}));app.use(express.static(__dirname + "/public"));

　　在這個例子中，我把來源目錄配置為我的應用程式的根目錄下的 "/less" 目錄，並讓 CSS 輸出到 "/public/css 目錄。此外，你還需要指定 "prefix" 屬性，以匹配跟在 "/public" 後面的目錄，即 "/css" 目錄。

　　你還可以指定其它參數，上面指定了 force 參數，讓每次請求的時候重新編譯 LESS 檔案，再結合自動重新整理功能，這樣在開發的時候修改樣式代碼都可以有即時的效果。

　　最後在頁面上引用 CSS 檔案就和正常的一樣了：

<link rel="stylesheet", type="text/css", href="css/styles.css">

升級和遷移　　

　　這邊文章發布的時候，less-middleware 已更新到到 1.0.3 版本，上面的配置是針對 0.1.x 的，下面給大家介紹如果從 0.1.x 遷移到 1.0.x。

　　首先，也是重要的變化——來源目錄參數的變化，之前是放在 options 參數裡的，如下：

lessMiddleware({  src: path.join(__dirname, '/public')})

　　因為來源目錄是必備參數，所以升級之後作為中介軟體的第一個參數，如下：

lessMiddleware(path.join(__dirname, '/public'))

　　第二個變化是中介軟體參數和 LESS 參數分離，這樣參數結構更清晰明了，如下：

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

　　options 參數是提供給中介軟體使用的，而後面兩個參數對象不會影響中介軟體，是傳遞給 LESS 解析和編譯器的。

　　在這個調整之後，對應參數定義方式也要相應的調整，下面是一些對應的修改：

• compress: 從 options 移除，需要在 compilerOptions 中定義；
• dumpLineNumbers: 從 options 移除，需要再 parserOptions 中定義；
• optimization: 從 options 移除，需要再 parserOptions 中定義；
• paths: 從 options 移除，需要再 parserOptions 中定義；
• preprocessor: 已經被移動到 preprocessor.less 中進行定義；
• relativeUrls: 從 options 移除，需要再 parserOptions 中定義；
• sourceMap: 從 options 移除，需要在 compilerOptions 中定義；
• yuicompress: 從 options 移除，需要在 compilerOptions 中定義；

　　第三個變化是新增加了參數，同時移除了 prefix 和 treeFunctions 參數，讓你可以更靈活的進行配置，如下：

• postprocess.css: 在被儲存之前，修改 CSS 編譯輸出；
• preprocess.less: 在 LESS 被解析和編譯前進行修改；
• preprocess.path: 在被檔案系統載入前，修改 LESS 路徑；

　　有了這幾個參數，我們之前使用 prefix 實現的功能可以用下面的方式達到同樣的效果：

preprocess: {  path: function(pathname, req) {    return pathname.replace(/^\/less\//, '/css');  }}

　　更詳細的資訊，可以參考 less-middleware 官方文檔。

 

您可能感興趣的相關文章

• 創意無限！一組網頁側邊欄過渡動畫【附源碼下載】
• 真是好東西！13種非常動感的頁面載入動畫效果
• 你見過嗎？9款超炫的複選框（Checkbox）效果
• 超贊！基於 Bootstrap 的響應式的後台系統管理範本
• 太贊了！超炫的頁面切換動畫效果【附源碼下載】

 

本文連結：LESS-Middleware：Node.js 和 LESS 的完美搭配

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文出處【http://www.cnblogs.com/lhb25/】