乐趣区

关于javascript:小程序使用less语法

从去年五月份开始咱们始终在做小程序我的项目,通过一年的迭代性能曾经欠缺…… 扯远了,西内
刚开始开发的时候应用 wxss 书写款式代码,那感觉,那效率,PM 差点气到职。
于是咱们开始寻找高效的解决方案(寻找个屁,百度一搜一堆),网上很多解决方案都是在编辑器配置,emmmm 这是真的高效。
因为的确不习惯改编辑器配置,咱们还是写了一个脚本,用来编译 less。(老表,间接上代码,BB 这么多)。

一种是 lessc 编译,一种是用 less 的 render 办法;
小程序尽量不要引入本地 less 包,因而 lessc/less 都是用的 global 环境(恁娘的)。
github 地址:node-compile-less 心愿给个激励,感激

/**
 * @file 小程序编译 less
 *
 */

const fs = require('fs');
const path = require('path');
// const less = require('less');
const {exec} = require('child_process');
const globalLessc = '/Users/yujinjiang/.nvm/versions/node/v14.4.0/bin/lessc';

// 编译配置
const COMPILE_CONFIG = {
    SOURCE: 'less',
    TARGET: 'wxss'
};

// 编译目录
const observedDirs = [path.join(__dirname, './pages/'),
    path.join(__dirname, './packageA/'),
    path.join(__dirname, './components/'),
];

// 编译监听
observedDirs.forEach(observedDir => {

    // 监听选项
    const watchOptions = {
        persistent: true,
        recursive: true,
        encoding: 'utf-8'
    };

    fs.watch(
        observedDir,
        watchOptions,
        (eventType, filename) => {const ext = filename.slice(filename.lastIndexOf('.') + 1);

            const {
                SOURCE,
                TARGET
            } = COMPILE_CONFIG;

            if (ext === SOURCE) {const sourcePath = path.join(observedDir, filename);
                const targetPath = sourcePath.slice(0, sourcePath.lastIndexOf('.') + 1) + TARGET;
                exec(`${globalLessc} ${sourcePath} ${targetPath}`);

                // const encodingOption = {
                //     encoding: 'utf-8'
                // };

                // fs.readFile(
                //     sourcePath,
                //     encodingOption,
                //     (e, data) => {//         if (e) {
                //             return;
                //         }
                //
                //         less.render(data)
                //             .then(code => {
                //
                //                 fs.writeFile(
                //                     targetPath,
                //                     code.css,
                //                     encodingOption,
                //                     (e) => {//                         if (e) {//                             console.log(e);
                //                         }
                //                     }
                //                 );
                //             })
                //             .catch(() => {});
                //     }
                // );
            }
        }
    );
});
退出移动版