如何在服务器上自动将LESS编译成CSS？答案

【问题标题】：How to automatically compile LESS into CSS on the server?如何在服务器上自动将LESS编译成CSS？
【发布时间】：2012-11-28 16:45:01
【问题描述】：

我的朋友设计师正在手动编译他的 LESS 文件并使用 Coda（远程站点）上传它，花费了大量宝贵的时间。他问我：

是否可以自动检测Linux服务器上的文件更改并毫不延迟地编译？

【问题讨论】：

如果您使用 Drupal，Less 模块会自动为您处理更少的文件。

标签： css linux events less iowait

【解决方案1】：

我已经制作了一个脚本并发布了详细信息：

易于设计人员使用
文件保存后立即执行 LESS 编译器，不消耗服务器资源
任何能够远程编辑的编辑器都可以使用此解决方案 - Code、Sublime Text、Textmate

首先，您需要通过在控制台中输入以下内容在服务器上安装“npm”：

sudo apt-get install npm inotify-tools
sudo npm install -g less
sudo nano /usr/local/bin/lesscwatch

将以下内容粘贴到文件中：

#!/bin/bash
# Detect changes in .less file and automatically compile into .css
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }
inotifywait . -m -e close_write | while read x op f; do.
    if [ "$f" == "$1" ]; then.
        lessc $f > $2 && echo "`date`: COMPILED";.
    fi
done

保存，退出，然后执行：

sudo chmod +x /usr/local/bin/lesscwatch

你已经完成了。下次您需要处理 LESS 文件时，您需要打开终端（Coda 内置），转到文件的文件夹（使用 cd）并执行以下命令：

lesscwatch main.less main.css

它将输出有关成功编译或错误的信息。享受吧。

【讨论】：

我在Ubuntu上发现，我必须安装nodejs包，并修改lessc脚本（/usr/local/bin/lessc）以使用nodejs作为可执行文件，而不是node.js。即，将/usr/local/bin/lessc 的第一行更改为#!/usr/bin/env nodejs。我喜欢这个解决方案；感谢发布！
我的 bash 不太好，但我的系统出现了格式问题。如果我删除了行尾点并将do 和then 移动到它们自己的行中（并删除分号），它会很好地工作。谢谢！

【解决方案2】：

我修改了@romaninsh 的解决方案，以便在更改目录中的任何Less 文件时重新编译。我还在编译 Less 文件之前添加了一个 echo 语句，以提供一些验证，以在编译需要几秒钟的情况下检测到更改。

/usr/local/bin/lesscwatch:

#!/bin/bash                                                                     
# Detect changes in .less file and automatically compile into .css                 
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }                  
inotifywait . -m -e close_write | while read x op f; do                            
    if [[ "$f" == *".less" ]]; then                                                
        echo "Change detected. Recompiling...";                                    
        lessc $1 > $2 && echo "`date`: COMPILED";                                                                                                                           
    fi                                                                             
done

这更接近于我习惯的 Mac 版 Less.app 的行为。

在使用 Less 进行开发时，我通常在项目的 /style 目录中有一堆文件，并使用覆盖将所有内容编译成单个 .css 文件。

使用示例：

base.less:

@import "overrides.less";
@import "variables.less";

body {
   ...
}

用法同

lesscwatch base.less base.css

【讨论】：

如果您希望将输出 css 文件保存在包含空格的某个路径中，请将第 7 行更改为 lessc $1 > "$2" && echo "`date`: COMPILED";

【解决方案3】：

我想要 bash 脚本，但我在使用 sublime 和 ubuntu 12.10 时遇到了一些麻烦。好，脚本和Ian_Marcinkowski 一样，但我确信它会在第一次事件后继续工作，并监控所有文件（以某种方式使用崇高文本，使用 tmp 文件，不要更改原始文件 - ！？！）。

#!/bin/bash
# Detect changes in .less file and automatically compile into .css
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }
inotifywait -m -e close_write . | while read x op f; do
    echo $f
    echo "Change detected. Recompiling...";
    lessc $2 > $3 && echo "`date`: COMPILED";
done

像这样调用脚本：

./monitor.sh  </path/to/dir>  <main.less> <main.css>

【讨论】：

【解决方案4】：

这对我有用：

安装：
sudo apt install node-lessenter

2.这是如何使用它。
lessc style.less style.css

【讨论】：