As a web designer there are three languages you’re pretty much guaranteed to work with one way or another: CSS, HTML and JavaScript. In this tutorial you’re going to leverage the command line to make your development with these three languages more powerful and more efficient.
You’ll learn how to use command line to:
Compile preprocessor (Stylus, Sass and LESS) code for CSS
Autoprefix CSS
Compress, combine and clean CSS
Compile Jade for HTML
Concatenate and minify JavaScript
Note: this tutorial assumes you’ve already completed the previous tutorials in this series. If you haven’t, you’ll find it helpful to go back and follow those before proceeding.
CSS Preprocessors
If you’ve never worked with CSS preprocessors before drop everything immediately and try one out. Once you find a preprocessor you like that fits your coding style, it’s likely you’ll never code in raw CSS again.
The three preprocessors that are generally considered to be the ones to choose from are Stylus, Sass / SCSS and LESS. Tuts+ has an awesome range of tutorials and courses to help you learn how to write in the syntax of all three preprocessors.
In this tutorial we’re going to cover how you can use the command line to compile code for each of the three.
Stylus
Every preprocessor user has a favorite, and mine is Stylus. It uses a minimal syntax that can be written very quickly, has very powerful functionality, and is supported by great third party libraries like Jeet and Kouto-Swiss.
You can read all about Stylus at: http://stylus-lang.com/
Install Stylus
To install Stylus globally, enabling you to use it to compile “.styl” files anywhere, run this command:
Compile Stylus
The easiest way to compile with Stylus is to use this one line command:
This command will compile “example.styl” into “example.css” in the same directory.
To break it down we have stylus to start the command. Then we use a < example.styl to indicate the Stylus input file, followed by > example.css to denote the name of the CSS file we want to have created.
You also have the option to add additional flags to this command, such as using the --compress flag to remove whitespace from the resulting CSS file:
As an alternative to compiling one file at a time, you can compile all the Stylus files in one directory into CSS files in another directory. To do this, after the stylus command, specify the source folder, then use the --out flag followed by the destination folder.
For example, to compile all the Stylus files from a folder named “source_files” into “assets/css” use:
Note: the folder you’re compiling into must already exist before you run the command as it will fail if it can’t find the specified folder to output CSS files to.
There are several other options you can leverage when using Stylus via the command line. To read all about them visit: http://stylus-lang.com/docs/executable.html
Sass / SCSS
Sass is very likely the most popular preprocessor at this point in time. It is incredibly powerful in what you can achieve with it and has a very large and active community. It’s supported by well known third party libraries like Compass, Bourbon and Susy.
Read more about Sass at: http://sass-lang.com/
You have two options when it comes to compiling Sass on your machine: you can either use Ruby to handle it, or you can use LibSass.
Sass was first created to run on Ruby, and as such if you’re looking for 100% full feature completeness and support, it’s the option you may wish to choose. For example, if you want to use Compass the easiest way is to stick with Ruby compilation.
LibSass was created as an alternative, and one of the options it makes available is compiling sass via an npm package instead. This approach compiles sass much faster, bringing a compile time of around 5 seconds through Ruby down to under half a second through LibSass. However, you may find certain features and third party code are unsupported.
Which you choose is completely down to personal preference, but as a rule of thumb I would suggest going with LibSass for speed unless there’s something specific (like Compass) for which you need Ruby compilation.
Regardless of your choice, we’ll cover using both so you’re all set in either event.
Install Ruby Sass
To compile Sass via Ruby, you’ll first need to have Ruby installed on your machine.
If you’re on Mac you’re in luck as Ruby already comes preinstalled so you don’t have to do a thing.
If you’re on Windows, head to http://rubyinstaller.org/ then download and run the installer you find there. Next, install Sass by running this command:
Sass should be automatically downloaded and installed for you. To double check the installation has been successful run the command:
You should see the version number and name of your Sass installation displayed in your terminal:
Compile with Ruby Sass
To compile a file using Ruby sass just type sass, followed by the name of the input file, a space, then the name you’d like your compiled CSS file to have:
Watch with Ruby Sass
Ruby Sass also has an inbuilt “watch” function (we’ll cover more on watching later) that will watch your files for changes and automatically recompile them every time they’re saved.
To use it, add the --watch flag to your command, then separate the names of your source and compiled file with a colon instead of a space:
You can also specify whole directories to watch and to output to, instead of single files, like so:
Once watching is initiated you should see something like this in your terminal:
Getting More Info on Commands
To read about all the options available via command line with Ruby Sass run:
A read out of the command line docs will be displayed in your terminal:
You can use this --help flag to get more information on any command you use. Just type the name of the command followed by --help and you’ll get information similar to the above in each case.
Install LibSass / node-sass
If you go with LibSass, you can get started with the same method you’ve used to install npm packages earlier in this tutorial series.
LibSass itself is written in C/C++ but there are various implementations of it, including some done to work with Node.js. In our case we’ll be using the package node-sass.
To install node-sass globally, run this command:
Compile with node-sass
To compile a file type node-sass followed by the name of the input file and the name you’d like your compiled CSS file to have:
To control the directory your CSS file is compiled into add the --output flag and destination directory in between the names of your input and output files:
Watch with node-sass
Like Ruby Sass, node-sass also uses the --watch flag to enable automatic compilation of your files on change:
You can also specify whole directories to watch, and to output to, instead of single files:
When using node-sass to watch a whole directory, be sure to include /* at the end to specify you want to all the files within.
Stopping a "watch" Process
When you have a “watch” process running you can stop it by either:
Closing down the terminal
Pressing CTRL + C
LESS
The LESS preprocessor is also very popular, and is probably most well known for its employment in the Twitter Bootstrap framework. LESS is a great first preprocessor to start working with as it’s very similar to writing in straight CSS.
Read more about LESS at: http://lesscss.org/
Install LESS
To install LESS globally, enabling you to use it to compile “.less” files anywhere, run this command:
Compile LESS
Open a terminal in the folder housing the LESS file you want to compile and use the command lessc followed by the name of the file, a > symbol, then the name you want your compiled CSS file to have:
Autoprefixing CSS
Autoprefixer is an npm package that checks with CanIUse.com to get up to date information on which CSS properties need vendor prefixes and which don’t. It then automatically handles adding required vendor prefixes into your code.
This can be incredibly helpful as, unless you’re monitoring browser updates constantly, you can easily find yourself including browser prefixes you don’t really need anymore. It also means you can write all your CSS without having to think about prefixes, and let Autoprefixer take care of them for you.
For example, autoprefixer will turn this code:
…into this:
Read more about Autoprefixer at: https://www.npmjs.com/package/autoprefixer
Install Autoprefixer
Install Autoprefixer globally with:
Autoprefix a CSS File
To autoprefix a CSS file use the following command:
Unlike compiling a preprocessor file, this will not create a second file by default. The file you target will be updated, with the correct prefixes added in directly.
If you do want Autoprefixer to generate a second, separate file add the --output flag followed by a name for your prefixed css file:
Optimizing CSS
You always want the CSS you deploy on your sites to be crunched down to the smallest size possible. To achieve this you can use optimization techniques of:
Compression - removing white space and comments
Cleaning - modifying the code itself to take up less space
Compressing with Preprocessors
Stylus, Ruby Sass and node-sass all have the ability to compress your CSS during compilation.
In Stylus, include the --compress flag:
In Ruby Sass include the --style flag, followed by compressed:
In node-sass add the --output-style flag followed by compressed:
Cleaning and Compressing with clean-css
If you’re not using CSS preprocessors, or you just want maximum code optimization, you can use the clean-css package which will put your CSS files through more in depth compression processes.
Regular compression processes typically just remove white space and comments from your CSS. The clean-css package on the other hand can also do things like:
Merging duplicated selector names
Merging duplicated properties within the same style
Rounding off numbers with many decimal places
Removing trailing semicolons and spaces at the end of selector styles
Merging duplicated selectors can be handy, for example, should you like to have all the layout for a certain class initially in a “layout.css” file, while the coloring for the same class is initially in a “colors.css”.
Rounding off numbers is great for when you’ve used a preprocessor function to convert a value into rem units and you end up with something like 2.3649858573rem. With clean-css that number would be rounded off to two decimal places, bringing it to a much tidier 2.36rem value.
You can read more about clean-css at: https://github.com/jakubpawlowicz/clean-css
Install clean-css
Install clean-css globally with the command:
Use clean-css
To clean a CSS file use:
Note: Even though the package name “clean-css” has a hyphen in it, be sure to use cleancss without a hyphen to start your commands.
To specify a new file name for clean-css to generate use the -o flag followed by the new file name, before the name of the file you’re targeting:
There are several other command options available for clean-css, which you can read all about at: How to use Clean CSS CLI.
HTML & JavaScript
Jade
Jade is an amazing language that compiles into HTML, and makes it possible for you to both write your code in shorthand so development is much faster, and create your own templating systems so you can save yourself on rewriting code.
Read more about Jade at: https://www.npmjs.com/package/jade
Install Jade
To install Jade globally run the command:
Compile Jade
Jade, created by the same person as Stylus, uses the same basic command syntax of < and > signs to compile a file:
This command will compile “index.jade” into “index.html” in the same directory.
To compile all the Jade files in a certain directory use:
To set the directory you want your HTML files to be written to place the --out flag between the name of the input and output directories:
To use Jade’s watch function for automatic compilation on saving, pass the --watch flag right after the jade command.
For single files:
Or for full directories:
Concatenating & Minifying JavaScript Files
Just as we want the CSS files we deploy to be optimized, so too do we want to deliver our JavaScript files in the most efficient way possible.
It’s common for us to have multiple JS files going into our projects, such as needing Modernizr, jQuery and our own custom code for example, but we also want to minimize the number of http requests our sites make. Additionally we want to ensure the load time for our JavaScript is super fast.
The best way to handle both issues is to simultaneously concatenate our JavaScript files into a single file, meaning we’ll only need one http request to load it, and minify the resulting file so it’s at the smallest possible size.
We’ll be using the UglifyJS package to take care of this process.
To install uglify-js globally run:
To combine two JavaScript files then strip whitespace and comments from the resulting file, use the uglifyjs command followed by the names of each of your source files with spaces in between. After that include the --output flag and the name you want your new combined & minified file to have:
As well as the default stripping of whitespace and comments, you can also add compression which will actually modify the code to reduce its size. To do this add the --compress flag at the end of the command:
Another optimization option available is to “mangle” the code, which will do things like crunching variable, function and argument names down to single characters. To use this option add the --mangle flag at the end of the command:
You can also use both compression and mangling by passing both flags:
Read more about the commands you can run with UglifyJS at: https://www.npmjs.com/package/uglify-js
A Note on Minifying Third Party JavaScript
If you’re combining and/or minifying third party scripts like jQuery, Modernizr and so on, make sure you use the full expanded versions of those files. It’s generally a bad idea to re-minify files that have already been minified as you can break their functionality.
You can identify files that have already been minified as they will typically follow the naming convention of “name.min.js”, while the expanded version of the file will be “name.js”.
In the Next Tutorial
Now you know how to complete some incredibly useful tasks with various commands, but what if you could complete all the tasks your project needs all at the same time with one single command?
In the next tutorial you’ll learn how to do exactly that, using task runners to configure all the tasks your project needs so that all your compilation, autoprefixing, combining, and optimization can be done at once and in just a few seconds.
I’ll see you in the next tutorial!