YUI 3 Shifter: Compiling LESS files!?!

In my previous blog post, I had expressed my interest in using YUI’s shifter build tool for compiled modules. So far my experience with Shifter has been pleasant, but my biggest issue with the tool is best practices are not well defined. For example, Shifter in conjunction with Yogi will create and build modules, but what about the code that will call those modules? What directory should the code be stored in? Shouldn’t those scripts be compiled also? But let’s not go off on a tangent here…

Compiling LESS files!?!
Currently Shifter will only compile JavaScript and CSS files where the –watch option’s build trigger is an update on a CSS, JSON, or JavaScript file. I have provided a pull-request for code that will override the default watched types. For reference, this code can be cloned on GitHub.

An example of build.json:

{
    "name": "module",
    "exec": [
        "less-compile"
    ],
    "builds": {
        "module": {
            "jsfiles": ["module.js"],
            "skinnable": true
        }
    }
}

One of the assumptions when using Shifter is CSS files must not be changed during compilation else the module will be recompiled. Due to this assumption, the LESS compilation must execute in a blocking fashion which can be solved by including an executable inside the “exec” option. For this reason, a LESS compiler is incompatible with the Shifter –watch command.

Why can’t LESS and CSS files be watched at the same time?
Watching both CSS and LESS files will break the aforementioned assumption that CSS files cannot be changed during compilation. Also, the other assumption is that Shifter will only watch globally defined file types for changes. As it stands, a build directory will opt for either LESS or CSS, not a mixture.

Defining Watched Extensions
Watched extensions can either be added on the command line or in the .shifter.json file. After defining the watched extensions, shifter needs to be called to be compiled.

An example of command line arguments:

shifter --watch js --watch less --watch json

An example of a .shifter.json file:

{
    "watched-extensions" : {
        ".less": true,
        ".js": true,
        ".json": true
    }
}

Note: Every extension value must be true, else the file will not be watched. Technically, this means that any value that evaluates to true will be watched.

Can this process be repeated for other files?
Sure. As long as a command is defined withing the “exec” for the build.json file and the appropriate file type is defined, then any file should build correctly whether it is SCSS, Handlebars, or etc. Please head over to the less-compile-plugin module for an example of an executable.

Advertisements