最近我一直在研究 Node.js ，并想用 less-middleware 中間件，這樣我可以很容易的在我的應(yīng)用程序中使用 LESS 了。配置好以后，LESS-Middleware 能夠自動(dòng)處理編譯你的 LESS 代碼為 CSS 代碼。
如果您指定一個(gè)不同的 "src" 和 "dest" 的目錄，您還必須提供 "prefix" 選項(xiàng)，它必須匹配跟在您的目標(biāo)目錄中后面的目錄。下面是這個(gè)例子可以更好的讓你理解：
- 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"));
在這個(gè)例子中，我把源目錄配置為我的應(yīng)用程序的根目錄下的 "/less" 目錄，并讓 CSS 輸出到 "/public/css 目錄。此外，你還需要指定 "prefix" 屬性，以匹配跟在 "/public" 后面的目錄，即 "/css" 目錄。
你還可以指定其它參數(shù)，上面指定了 force 參數(shù)，讓每次請求的時(shí)候重新編譯 LESS 文件，再結(jié)合自動(dòng)刷新功能，這樣在開發(fā)的時(shí)候修改樣式代碼都可以有即時(shí)的效果。
最后在頁面上引用 CSS 文件就和正常的一樣了：
這邊文章發(fā)布的時(shí)候，less-middleware 已更新到到 1.0.3 版本，上面的配置是針對 0.1.x 的，下面給大家介紹如果從 0.1.x 遷移到 1.0.x。
首先，也是重要的變化——源目錄參數(shù)的變化，之前是放在 options 參數(shù)里的，如下：
- lessMiddleware({
- src: path.join(__dirname, '/public')
- })
因?yàn)樵茨夸浭潜貍鋮?shù)，所以升級(jí)之后作為中間件的第一個(gè)參數(shù)，如下：
- lessMiddleware(path.join(__dirname, '/public'))
第二個(gè)變化是中間件參數(shù)和 LESS 參數(shù)分離，這樣參數(shù)結(jié)構(gòu)更清晰明了，如下：
- lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])
options 參數(shù)是提供給中間件使用的，而后面兩個(gè)參數(shù)對象不會(huì)影響中間件，是傳遞給 LESS 解析和編譯器的。
在這個(gè)調(diào)整之后，對應(yīng)參數(shù)定義方式也要相應(yīng)的調(diào)整，下面是一些對應(yīng)的修改：
compress: 從 options 移除，需要在 compilerOptions 中定義；
dumpLineNumbers: 從 options 移除，需要再 parserOptions 中定義；
optimization: 從 options 移除，需要再 parserOptions 中定義；
paths: 從 options 移除，需要再 parserOptions 中定義；
preprocessor: 已經(jīng)被移動(dòng)到 preprocessor.less 中進(jìn)行定義；
relativeUrls: 從 options 移除，需要再 parserOptions 中定義；
sourceMap: 從 options 移除，需要在 compilerOptions 中定義；
yuicompress: 從 options 移除，需要在 compilerOptions 中定義；
第三個(gè)變化是新增加了參數(shù)，同時(shí)移除了 prefix 和 treeFunctions 參數(shù)，讓你可以更靈活的進(jìn)行配置，如下：
postprocess.css: 在被保存之前，修改 CSS 編譯輸出；
preprocess.less: 在 LESS 被解析和編譯前進(jìn)行修改；
preprocess.path: 在被文件系統(tǒng)加載前，修改 LESS 路徑；
有了這幾個(gè)參數(shù)，我們之前使用 prefix 實(shí)現(xiàn)的功能可以用下面的方式達(dá)到同樣的效果：
- preprocess: {
- path: function(pathname, req) {
- return pathname.replace(/^\/less\//, '/css');
- }
- }
更詳細(xì)的信息，可以參考 less-middleware 官方文檔。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。