How to Automatically Compile Less into CSS on the Server

How to automatically compile LESS into CSS on the server?

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.

automatically compile less file on save of a imported less file

In all honesty, your best bet is to actually use Less's own compiler which will of course be the most up to date option. It will be done through command line but it's the best way to know that everything is correct, working and up-to-date.

All the information can be found in the Less Documentation Here

More information about compiling with imports can be found HERE

The latest version of WinLESS does report that it has automatic re-compiling when an @import file is changed so it could be that your version of WinLESS is out of date. (See HERE - 3rd bullet point under Features)

Alternatively, see if you can get it to work on purely local files. If this works, it may be an issue with the compiler not being able to do asynchronous checks over SSH.

How to compile LESS into CSS when files are saved in Eclipse

There are a lot of Java Less compiler (see Java Compiler for Less CSS?), so you can execute one of them by your build tool (e.g. Ant - maybe you need to write a simple Java application, which use the chosen compiler).

If you use Maven (or can switch to it) to project management, then you can use one of lesscss-maven-plugin:

• biz.gabrys.maven.plugins:lesscss-maven-plugin
• org.lesscss:lesscss-maven-plugin
• see more...

Compile a referenced LESS file into CSS with PHP automatically

THIS ASSUMES LESSPHP v0.3.8+ Unsure about earlier versions, but you'll get the gist of how it works if it doesn't straight out of the box.

<link rel="stylesheet" type="text/css" href="styles/main.less" />

If you were using less.js to compile client side, make sure you change rel="stylesheet/less" to rel="stylesheet"

1) Grab Lessphp I placed these files in /www/compilers/lessphp/ for the context of this demo

2) Make a PHP script that we can throw out LESS files at. This will deal with caching, compiling to CSS and returning the CSS as a response. I have placed this file at /www/compilers/ and called it lessphp.php

Most of this code was on the Lessphp site, except there were errors in it, and I have added the response at the end.

<?php
require "lessphp/lessc.inc.php";
$file = $_GET["file"];
function autoCompileLess($inputFile, $outputFile) {
    // load the cache
    $cacheFile = $inputFile.".cache";
    if (file_exists($cacheFile)) {
        $cache = unserialize(file_get_contents($cacheFile));
    } else {
        $cache = $inputFile;
    }
    $less = new lessc;
    $less->setFormatter("compressed");
    $newCache = $less->cachedCompile($cache);
    if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
        file_put_contents($cacheFile, serialize($newCache));
        file_put_contents($outputFile, $newCache['compiled']);
    }
}
autoCompileLess('../' . $file, '../' . $file . '.css');
header('Content-type: text/css');
readfile('../' . $file . '.css');
?>

This will compile the LESS file (eg, styles/main.less) to a cache file and a CSS file (eg, styles/main.less.css).

3) Add a mod_rewrite rule so that any LESS files a user requests are redirected to our compiler, giving it its path. This was placed in the root .htaccess file.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^([^.]*\.less)$ compilers/lessphp.php?file=$1 [R,QSA,L]
</ifModule>

If you are using WordPress, this rule will need to come after it - even if WordPress is in a sub directory, it seems to overwrite these rules, and LESS compilation will not occur for referenced files which exist below (directory wise) WordPress's .htaccess rules.

4) Your LESS code should be relatively referenced in relation to the compilers location. Additionally, Lessphp compiler will fail if there are empty attributes, eg. background-color: ;

---

If all is working well, the following should occur:

1. Directly browse your LESS file http://domain.com/styles/main.less

2. Be automatically redirected to http://domain.com/compilers/lessphp?file=styles/main.less

3. Be presented with minified CSS

4. main.less.css and main.less.cache should now exist in the same directory as your LESS file

5. The last modified dates shouldn’t change unless you update your LESS file

Less Compiler for Linux

Although using node.js version is recommended, you can install less as ruby gem:

sudo apt-get install rubygems1.8 ruby1.8-dev
sudo gem install rubygems-update
sudo gem update rubygems
sudo gem install less

and than use lessc which is in /var/lib/gems/1.8/bin/lessc, so you may want to create symlink:

sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

or add ruby gems dir to PATH variable:

export PATH=/var/lib/gems/1.8/bin:$PATH

EDIT:

Using lessc as described here:

Command-line usage

Less comes with a binary, which lets you invoke the compiler from the
command-line, as such:

$ lessc styles.less

This will output the compiled CSS to stdout, you
may then redirect it to a file of your choice:

$ lessc styles.less > styles.css

To output minified CSS, simply pass
the -x option.

---

Related Topics