Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to automatically compile LESS into CSS on the server?

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?

like image 538
romaninsh Avatar asked Nov 28 '12 16:11

romaninsh


People also ask

How you can pre compile LESS into CSS?

It allows to use of variables and provides the functionality of a programming language. But if we want to precompile LESS into CSS before using it on a web page, we can do that by using the LESS package of the npm package manager. In this way, we can use less into a simple HTML webpage.

Does LESS compile to CSS?

Less (sometimes stylized as LESS) is one of the dynamic style sheet languages that can be compiled into Cascading Style Sheets (CSS), or can run on the server-side and client-side.

How do I compile LESS to CSS in Visual Studio?

css file nested under it in Solution Explorer after being enabled on the project. By default, compilation is off and that's indicated by a watermark at the bottom right corner of any LESS file. To enable LESS compilation, simply click the watermark and it changes to indicate LESS compilation is "on". All .

How many ways can you use LESS in CSS?

There are two ways to use LESS. You can create a LESS file and convert it on-demand using a Javascript file, or you can pre-compile it and use the resulting CSS file in your theme.


1 Answers

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.

like image 85
romaninsh Avatar answered Oct 13 '22 17:10

romaninsh