How to use less.js with node.js to watch .less files in a folder?

Step 1: Install Required Packages

First, you need to install the less and fs-extra packages (an extended file operation library) in your project. Run the following command:

bash
npm install less fs-extra

Step 2: Write a Script to Find and Compile .less Files

Next, create a JavaScript file, such as compileLess.js, and use the following code to find all .less files and compile them:

javascript
const fs = require('fs-extra');
const less = require('less');
const path = require('path');

// Define the directory to search
const directory = './styles';

// Recursively traverse the folder to find .less files
function findLessFiles(dir) {
    let results = [];
    const list = fs.readdirSync(dir);

    list.forEach(file => {
        file = path.resolve(dir, file);
        const stat = fs.statSync(file);

        if (stat && stat.isDirectory()) {
            // If it's a directory, recursively search
            results = results.concat(findLessFiles(file));
        } else if (file.endsWith('.less')) {
            // If it's a .less file, add to results
            results.push(file);
        }
    });

    return results;
}

// Compile .less files
function compileLessFiles(files) {
    files.forEach(file => {
        const fileContent = fs.readFileSync(file, 'utf8');
        less.render(fileContent, { filename: file }, (e, output) => {
            if (e) {
                console.error(e);
                return;
            }

            // Output or save the compiled CSS
            console.log(`Compiled CSS for ${file}:`);
            console.log(output.css);
            // For example, save the output to a .css file
            const cssFilename = file.replace('.less', '.css');
            fs.writeFileSync(cssFilename, output.css);
        });
    });
}

// Main function
function main() {
    const lessFiles = findLessFiles(directory);
    if (lessFiles.length > 0) {
        compileLessFiles(lessFiles);
    } else {
        console.log('No .less files found');
    }
}

main();

Step 3: Run the Script

Finally, run your script using Node.js:

bash
node compileLess.js

This script will find all .less files in the specified folder and its subfolders, read their contents, compile them using less.js into CSS, and print or save the compiled CSS.

Summary

This example demonstrates how to combine Node.js's file system operations with less.js's compilation capabilities to automatically locate and compile .less files. This is particularly useful for automating style file processing in large projects.