node 實現 less 自動編譯工具的製作

標籤： node

先簡單實現，將乙個 less 檔案編譯成 css 檔案

再實現，通過監視自動將 less 檔案編譯成 css 檔案

將 less 安裝到當前專案中，並且新增到依賴項中

const fs = require( 'fs' )      // 引入 fs 檔案讀寫模組

const less = require( 'less' )  // 引入 less 模組
const path = require( 'path' )  // 引入 path 路徑模組
// 當前檔案絕對目錄 __dirname : c:\users\54721\desktop\node\less編譯工具\node--less-\lib
const srcpath = path.join(__dirname, '../demo/src/main.less')
const distpath = path.join(__dirname, '../demo/dist/main.css')
// readfile 第二個引數，可以指定編碼型別
// 指定編碼型別後，得到的資料會自動轉換
fs.readfile( srcpath, 'utf8', ( err, data ) => 
// 這裡我們讀取到了 less 檔案內容
// console.log( data )
// 在**中呼叫 less
less.render( data, ( err, css ) => 
// 在這裡我們得到了 less 編譯後的 css 內容
// console.log( css.css )
// 下面就是要將 css.css 寫入到檔案中
fs.writefile( distpath, css.css, ( err ) => 
// 輸出 success 編譯寫入成功
console.log( 'success' )
})})
})

fs.watchfile( filepath, {}, (curr, prev) => {} )

const fs = require( 'fs' )      // 引入 fs 檔案讀寫模組

const less = require( 'less' )  // 引入 less 模組
const path = require( 'path' )  // 引入 path 路徑模組
// 當前檔案絕對目錄 __dirname : c:\users\54721\desktop\node\less編譯工具\node--less-\lib
const srcpath = path.join(__dirname, '../demo/src/main.less')
const distpath = path.join(__dirname, '../demo/dist/main.css')
// 監視檔案
fs.watchfile( srcpath,
,(curr, prev) =>  
// 這裡我們讀取到了 less 檔案內容
// console.log( data )
// 在**中呼叫 less
less.render( data, ( err, css ) => 
// 在這裡我們得到了 less 編譯後的 css 內容
// console.log( css.css )
// 下面就是要將 css.css 寫入到檔案中
fs.writefile( distpath, css.css, ( err ) => 
// 輸出 success 編譯寫入成功
console.log( 'success' )
})})})}
)

PHPStorm實現自動編譯less檔案

二 安裝，一直 next 三 檢查是否安裝成功 四 安裝lessc模組 cmd 開啟cmd控制台 cd f program files nodejs node modules npm 進入npm包管理模組 npm install less npm命令安裝less模組 五 安裝less plugin ...

自動編譯less為css

1.安裝 命令 npm install gulp less 或者 cnpm install gulp less 2.編寫檔案 獲取gulp var gulp require gulp 獲取gulp less模組 var less require gulp less 編譯less 在命令列輸入gulp...

webstorm 配置 less 自動編譯

查了一些都有點偏差，找到方法後記錄下 windows環境下 npm i less g 安裝後，會出現乙個安裝路徑 檢查是否安裝好 lessc vwebstorm中配置位置 file settings tools file watchers 增加乙個less型別的watcher 最簡單的配置就是只修改...