node.js - 如何使用 less.js 和 node.js 来查看文件夹中的 .less 文件？

Question

我正在寻找一个使用 less.js 和 node.js 在文件夹中设置服务器端监视和编译 .less 文件的简单指南。布莱恩在这篇文章中写道。

我试过命令行用法：$ lessc styles.less > styles.css.

我也尝试过“watchr”和“watch-less”，这一切都有效。但是，我正在寻找一个纯 node.js + less.js 解决方案。我相信有人能够清楚地解释如何配置 node.js 和 less.js 以查看文件夹中的 .less 文件。谢谢。

score 4 · Accepted Answer

我创建了演示项目来展示它是如何工作的。你可以在这里找到它https://github.com/corpix/watcherDemo

克隆后进入项目目录并执行npm install以安装较少的 Node.js 模块。尝试运行index.js并将.less文件更改为less_files/目录，修改后的文件将被编译并放入css_files/

score 4 · Accepted Answer

老实说，我已经看到了很多相同的主题和答案。

如果你和我一样，不想要更多的代码膨胀，那么只需下载一个适用于 Win/Mac/Nix 的 LESS 应用程序，它会在你每次保存 .less 文件时自动编译。

老实说，我认为这会减少服务器的负载，因为此时您只需要上传已编译和缩小的文件。

score 1 · Accepted Answer

我知道这是一篇旧帖子，但在我最近搜索相同内容时出现了几次。

我已经从 jonycheung 分叉并更新了代码 - 并提交了合并请求。

更新： jonycheung 已接受合并请求，因此他的原始代码现已更新

同时，代码可以在这里找到：

我也一直在研究和开发一个使用lessc的纯bash脚本，但不需要节点脚本来运行：

score 1 · Accepted Answer

您可以使用带有 -e 参数的主管来提供要监视的扩展：

nohup supervisor -e 'js|ejs|less' $APP_DIR/app.js  1>$APP_DIR/log/app.log 2>&1 &
echo $! > $APP_DIR/pid/app.pid;

此命令的更简单版本是：

supervisor -e 'js|ejs|less' app.js

score 1 · Accepted Answer

也许不是直接回答。但这是我的评论：

通常我们在开发阶段需要这个watch，我们需要更改less文件并查看结果，而不需要每次更改less文件都重新运行lessc命令。

我们通过纯less.js在我们的 html 中来做到这一点。如下：

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

完成开发任务后。您只需要运行lessc一次。

在开发过程中，您的页面可能需要更多时间来加载，但是如果您的网站是基于 ajax 的，并且您将其添加到您的模板页面中，这不会有什么大不了的。

score 1 · Accepted Answer

我写了一些你正在寻找的东西。该脚本将在 watch 文件夹中查找 .less 文件并将它们编译到输出文件夹中。您需要做的就是指定要观看的文件夹和输出文件夹。

node less-watch-compiler.js FOLDER_TO_WATCH FOLDER_TO_OUTPUT

它跳过观看名称以下划线或句点开头的文件。

我为我的开发过程编写了这个，但它仍然应该在服务器上工作。但是，您可能需要重新考虑在实时服务器上不断观察文件夹的变化。这是一项昂贵的手术。

score 1 · Accepted Answer

您可以使用less-watch-compiler来监视.less文件。您不需要像 grunt 一样观看主文件。只需安装此插件：

npm install -g less-watch-compiler

或者

yarn global add less-watch-compiler

用法：

less-watch-compiler [options] <source_dir> <destination_dir>

基本示例

 root 
 └──src
 │    └── main.less
 │    └── aux.less
 └──dist
      └── main.css

可以使用以下命令编译该项目：

less-watch-compiler src dist main.less

少看-compiler.config.json

{
    "watchFolder": "src",
    "outputFolder": "dist",
    "mainFile": "main.less"
}

可以使用以下命令编译该项目：

less-watch-compiler