node 实现 less 自动编译工具的制作
标签: node
github项目源码地址:点此进入
实现思路
- 先简单实现,将一个 less 文件编译成 css 文件
- 再实现,通过监视自动将 less 文件编译成 css 文件
项目结构
- lib 源码
- demo 编译demo包
- dist 编译文件生成目录
- src 源文件目录
开发流程
- npm init -y 生成 package.json 文件
- 在 package.json 文件中的 scripts 节点下添加一个 start 节点
"start": "node ./lib/index"
- 将 less 安装到当前项目中,并且添加到依赖项中
npm install --save 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 ) => {
// data.toString()
if( err ) {
throw err
}
// 这里我们读取到了 less 文件内容
// console.log( data )
// 在代码中调用 less
less.render( data, ( err, css ) => {
if( err ) {
throw err
}
// 在这里我们得到了 less 编译后的 css 内容
// console.log( css.css )
// 下面就是要将 css.css 写入到文件中
fs.writeFile( distPath, css.css, ( err ) => {
if ( err ) {
throw err
}
// 输出 success 编译写入成功
console.log( 'success' )
})
})
})
第二步 - 监视文件,实现自动编译
利用 fs 文件模块的 watchFile 方法对文件进行监视
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,
{
interval: 500 // 每 500 毫秒监视检查文件 一次
},
(curr, prev) => {
// readFile 第二个参数,可以指定编码类型
// 指定编码类型后,得到的数据会自动转换
fs.readFile( srcPath, 'utf8', ( err, data ) => {
// data.toString()
if( err ) {
throw err
}
// 这里我们读取到了 less 文件内容
// console.log( data )
// 在代码中调用 less
less.render( data, ( err, css ) => {
if( err ) {
throw err
}
// 在这里我们得到了 less 编译后的 css 内容
// console.log( css.css )
// 下面就是要将 css.css 写入到文件中
fs.writeFile( distPath, css.css, ( err ) => {
if ( err ) {
throw err
}
// 输出 success 编译写入成功
console.log( 'success' )
})
})
})
}
)