在项目中使用 Dead Simple LESS CSS Watch Compiler 来自动生成 css 文件

3 years ago

source link: https://www.ixiqin.com/2022/04/07/in-the-project-use-dead-simple-less-css-watch-compiler-to-automatically-generate-the-css-file/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

在项目中使用 Dead Simple LESS CSS Watch Compiler 来自动生成 css 文件

发表评论

最近在写一个 WordPress 主题来帮助我完成从 WordPress 到微信公众号的实现。在这个过程中，我需要借助于一些 CSS 的超集，来帮助我完成样式的编写。考虑到 SCSS 的 C++ 依赖问题，我选择了 Less 来完成。但如果直接使用 lessc 的话，主要面临的问题在于无法检测文件更新，这样对于需要实时查看效果的我来说，是比较麻烦的。所以我选择使用 Dead Simple LESS CSS Watch Compiler 来完成自动监控文件变化并刷新的功能。

执行 npm 命令来安装 Dead Simple LESS CSS Watch Compiler

yarn global add less less-watch-compiler

安装完成后，你就可以执行命令来监听文件的变化。

这里为了方便，我在 WordPress 插件目录中初始化了 npm，因此，可以非常方便的借助于 npm script 来完成命令的配置。

通过配置了单独的 Build 命令，实现了执行 npm run build 就会自动监听 less 文件夹下的文件，并转换成对应的 css 文件，放置在 css 目录中。

{
  "private": true,
  "scripts": {
    "build": "less-watch-compiler ./less ./css"
  },
  "devDependencies": {
    "less": "^4.1.2",
    "less-watch-compiler": "^1.16.3"
  }
}

如果你需要对 less 运行有更多配置的诉求，还可以创建一个 less-watch-compiler.config.json 来配置具体的执行目录。不过我对于这部分没有要求，就直接整个目录来进行配置了。

{
    "watchFolder": "<input_folder>",   
    "outputFolder": "<output_folder>",
    "mainFile": "<main-file>",   
    "includeHidden": false,
    "sourceMap": false,
    "plugins": "plugin1,plugin2",
    "lessArgs": "option1=1,option2=2",
    "runOnce": false,
    "enableJs": true
}

SCSS 因为 node-scss 的编译问题被各种吐槽，虽然换成了 dart-scss ，但历史的阴影还在。选择了 less 后，通过一些配置，可以让我自己的开发变得更加简单。何乐而不为？

本条目发布于2022年4月7日。属于Node.js分类，被贴了 Less、node.js、WordPress、前端、随笔标签。

← 你不做的那些事情，造就了你的样子

发表评论取消回复

您的电子邮箱地址不会被公开。必填项已用*标注

评论 *

显示名称 *

电子邮箱地址 *

网站地址

在此浏览器中保存我的显示名称、邮箱地址和网站地址，以便下次评论时使用。

如果有人回复我的评论，请通过电子邮件通知我。

Recommend

157

blog.fundebug.com 7 years ago
Cache

使用JSDoc自动生成代码文档 | Fundebug博客

使用JSDoc自动生成代码文档译者按：代码要有规范的注释，遵从jsDoc规则来注释可以生成有用的文档。为...

www.cocoachina.com 6 years ago
Cache

iOS 效率工具：自动生成 Model 文件

GitHub 地址： YBModelFile 一句代码自动生成 Model 文件，拖入工程既能使用。前言当一个...

blog.51cto.com 4 years ago
Cache

使用python脚本自动生成K8S-YAML-miaocunfa

使用python脚本自动生成K8S-YAML 1、生成 servie.yaml 1.1、yaml转json service模板yaml apiVersion: v1 kind: Service metadata: name: ${jarName} labels: name: ${jarName} version: v1 spec:...