1. Home
  2. Knowledge Base
  3. Ghostlab: Features
  4. Preprocessors

Preprocessors

Preprocessors compile your Sass, Jade and Typescript projects (and some more) into browser-ready CSS, HTML and JavaScript. They can be enabled for projects that you serve locally from your file system. Apart form the preprocessors proper, there is the option to run Autoprefixing on your compiled CSS (if you check the Autoprefixer, it will run whenever a Stylus, Less or Sass task has generated an ouptut file – available only in Ghostlab 3). For a wider integration into your workflow, you can run any (number of) shell script(s) when certain files in your project change.

Note that these preprocessors aren’t shipped with Ghostlab. When you are using one of them and they aren’t available on your system, Ghostlab tries to install them either via NPM (node package manager) or via gem (Ruby package manager), depending on availability of the package. If you’re system doesn’t meet the requirement for that (e.g. if you haven’t installed NPM or ruby), Ghostlab will tell you so.

 

preproc1

When you have a local file system project, Ghostlab will watch for file changes and reload the page whenever you edit it. If you enable a certain preprocessor, say Sass, it will not only watch for CSS file changes, but also for Sass file changes. Once it detects a Sass file change, it will try to run the Sass compiler to generate an up-to-date version of the CSS file. Note that in case you don’t want file watching, you can simply turn it off, and if you have your expert grunt file with sophisticated watch tasks already in place, then you may well skip this section.

preproc2

 

Preprocessor configuration

Up to a certain level, Ghostlab tries to guess a good configuration for any preprocessor you activate. In any case, you can specify all the necessary options for any preprocessor in its settings. Let’s have a look at these for the example of Sass.

Sass source directory: this is the directory where your Sass files are located. When you specify a source directory, then the generated output file will be created in the build directory with a relative path identical to the one of the source file relative to the source directory.

Output directory: this is the directory where the compiler puts your generated CSS. If the source file has a path relative to the source directory, then that relative path will be reproduced in the output directory.

File: if you specify a main file, then that file will be compiled whenver any file of it’s kind – so any Sass file – is changed. Please be sure to provide this option if you don’t want your partials to be compiled individually. E.g. if you are working on _partial.scss and change it, Ghostlab will try to compile it all by itself if you haven’t specified a main file. If you have specified a main file, it will simply compile that.

Additional command line parameters: you can specify any number of additional command line parameters – be it to enable support for compass (–compass), or to allow or disallow the generation of sourcemaps, to compress the output, etc.

preproc3

 

External scripts (shell/batch)

You can run any external script(s) if certain files change in your project. Simple give it a name, add a path expression defining which file changes will trigger it, and then write the script. On Mac, it is executed as a shell script, on Windows as a batch script. You can define global code that is prepended to any script that is run (that’s useful for settings paths, etc.). Also, you can set the working directory of the scripts.

Note: this is only available in Ghostlab 3

Was this article helpful?

Related Articles