如何在服务器上自动编译LESS到CSS？

Friend designer of mine was compiling his LESS file manually and uploading it with Coda (Remote Site) spending lots of precious time. He asked me:

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

Is it possible to automatically detect file change on the Linux server and compile without delay at all?

是否可以自动检测Linux服务器上的文件更改并立即编译？

3 个解决方案

#1

I have made a script and I publish the details:

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

Easy to use for designers
易于设计师使用
Executes LESS compiler immediately after file is saved, without consuming server resources
保存文件后立即执行LESS编译器，而不消耗服务器资源
Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate
任何能够远程编辑的编辑器都可以使用这个解决方案 - Code，Sublime Text，Textmate

First, you need to install "npm" on the server by typing this into the console:

首先，您需要在服务器上安装“npm”，方法是在控制台中输入：

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

Paste the following into the file:

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

#!/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

Save, exit, then execute:

保存，退出，然后执行：

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

You are all done. Next time you need to work with your LESS files, you will need to open terminal (Coda has a built-in), go to the folder of your file (using cd) and execute this:

你们都完成了。下次需要使用LESS文件时，需要打开终端（Coda有内置），转到文件夹（使用cd）并执行：

lesscwatch main.less main.css

It will output information about successful compilations or errors. Enjoy.

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

#2

I have modified @romaninsh's solution so that it will recompile when any Less files in the directory are changed. I have also added an echo statement before compiling the Less files, to provide some validation that a change has been detected in case compilation takes a few seconds.

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

/usr/local/bin/lesscwatch:

在/ 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

This more closely mimics the behaviour of Less.app for Mac that I am used to.

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

When developing with Less, I usually have a bunch of files in the /style directory of my project and compile everything down into a single .css file using overrides.

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

Usage example:

用法示例：

base.less:

base.less：

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

body {
   ...
}

The usage is the same as

用法与。相同

lesscwatch base.less base.css

#3

i'd like the bash script but I had some trouble using it with sublime wthin ubuntu 12.10 . well, the scripts did the same Ian_Marcinkowski does, but I am sure it keeps working after first event, and monitor all files (sublime text someway, use a tmp file, and do not change the original one - !?!).

我喜欢bash脚本，但是在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

call the script like :

调用脚本如：

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

#1