css - 在 mac os x 中自动编译 less css 文件

Question

我已经开始使用更少的 CSS。

我编写了一个小的 bash 脚本，它使用我的目标文件调用“lessc”命令，然后将其通过管道传输到我完成的 css 文件中。它看起来像这样:

#!/bin/bash
lessc ~/Documents/Development/Projects/blog/static/css/global.less --watch > ~/Documents/Development/Projects/blog/static/css/styles.css -x

这个 -x 标志压缩 CSS。

如您所见，我尝试使用 --watch 标志，据我所知，这意味着每次您对 less 文件进行更改时，它都会自动重新编译 CSS。但这似乎不起作用。

我知道我可以使用某人编写的“less 应用程序”，但我很好奇自己如何执行此操作，因为这显然是可能的。

Answer 1

因为不太经常使用@imports，所以它是一个过度设计的解决方案来监视所有涉及的文件。您可以经常使用一个简单的循环进行编译，例如:

while true; do lessc bootstrap.less > bootstrap.css 2> /dev/null; sleep 5; done

如果这太简单了，那么您可以尝试在 Bash 中使用 -nt 测试，它测试一个文件的 mtime 是否比另一个更新，例如(假设 bootstrap.less 包含一个用于 custom.less 的 @import):

while true
do
    if [ bootstrap.less -nt bootstrap.css ] || [ custom.less -nt bootstrap.css ]; then
        echo "Change detected, regenerating @ $(date)"
        lessc bootstrap.less > bootstrap.css
    fi
    sleep 5
done