node 实现 less 自动编译工具的制作

node 实现 less 自动编译工具的制作

标签： node

---

github项目源码地址：点此进入

实现思路

1. 先简单实现，将一个 less 文件编译成 css 文件
2. 再实现，通过监视自动将 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' )
                })

            })

        })
    }
)