Node.js 和 LESS 的完美搭配

LESS 是一個編寫 CSS 的很好的方式 ，讓你可以使用變量，嵌套規則，混入以及其它許多有用的功能，它可以幫助您更好地組織你的 CSS 程式碼。
　　最近我一直在研究 Node.js ，並想用 less-middleware 中間件，這樣我可以很容易的在我的應用程式中使用 LESS 了。配置好以後，LESS-Middleware 能夠自動處理編譯你的 LESS 程式碼為 CSS 程式碼。

       如果你把LESS 和CSS 檔案儲存在同一個目錄，設定很簡單，但我想用不同的路徑為我的來源目錄和目標目錄，這個地方就有點問題了，所以在這裡，我想我把發現的問題記錄下來。
　　如果您指定一個不同的 "src" 和 "dest" 的目錄，您也必須提供 "prefix" 選項，它必須符合跟在您的目標目錄中後面的目錄。以下是這個範例可以更好的讓你理解：

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 文件，再結合自動刷新功能，這樣在開發的時候修改樣式代碼都可以有即時的效果。正常的一樣了：

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

       這邊文章發佈的時候，less-middleware 已更新到到1.0.3 版本，上面的設定是針對0.1.x 的，下面給大家介紹如果從0.1.x 遷移到1.0.x。是必備參數，所以升級之後作為中間件的第一個參數，如下：

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

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

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

        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 定義；
yuicompress: 從options 移除，需要在compilerOptions 中定義；
　　第三個變更是新增加了參數，同時移除了prefix 和treeFunctions 參數，讓你可以更靈活的進行配置，如下：
postprocess.css: 在被儲存之前，修改CSS 編譯輸出；
preprocess.less: 在LESS 被解析和編譯前進行修改；
preprocess.path: 在被檔案系統載入前，修改LESS 路徑；
　　有了這幾個參數，我們之前使用prefix 實作的功能可以用下面的方式達到相同的效果：

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

以上是Node.js 和 LESS 的完美搭配的詳細內容。更多資訊請關注PHP中文網其他相關文章！