How to automatically compile LESS into CSS on the server?

泪湿孤枕 提交于 2019-12-03 03:21:25

问题


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:

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


回答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
  • Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate

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

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:

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.

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

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.

Usage example:

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 - !?!).

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


来源:https://stackoverflow.com/questions/13671969/how-to-automatically-compile-less-into-css-on-the-server

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!