featured4

How does a Command Line fit into Web Design: Working with the Front End (4/5)

By - (Last Modified: July 27, 2015)

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.

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, follow along with this tutorial to learn codes for that preprocessor.

The three preprocessors that are generally considered to be the ones to choose from are Stylus, Sass / SCSS and LESS. In this tutorial we’re going to cover how you can use the command line to compile code for each of the three but you don’t have to learn all of these; just concentrate on your favorite preprocessor.

The LESS preprocessor is very popular, and is probably most well known for its employment in the Twitter Bootstrap framework. Since I personally love Bootstrap, it’s my favorite preprocessor. LESS is a great first preprocessor to start working with as it’s very similar to writing in straight CSS.

less-banner

Read more about LESS at: http://lesscss.org/

To install LESS globally, enabling you to use it to compile “.less” files anywhere, run this command:

[shell][sudo] npm install less -g[/shell]

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:

[shell]lessc source_file.less > compiled_file.css[/shell]

This command will compile “source_file.less” into “compiled_file.css” in the same directory.

Stylus 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.

Stylus Banner

You can read all about Stylus at: http://stylus-lang.com/

To install Stylus globally, enabling you to use it to compile “.styl” files anywhere, run this command:

[shell][sudo] npm install stylus -g[/shell]

The easiest way to compile with Stylus is to use this one line command:

[shell]stylus < example.styl > example.css[/shell]

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:

[shell]stylus –compress < example.styl > example.css[/shell]

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:

[shell]stylus source_files –out assets/css[/shell]

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 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.

SASS Banner

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.

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:

[shell][sudo] gem install sass[/shell]

Sass should be automatically downloaded and installed for you. To double check the installation has been successful run the command:

[shell]sass -v[/shell]

You should see the version number and name of your Sass installation displayed in your terminal:

SASS Version output

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:

[shell]sass source_file.scss compiled_file.css[/shell]

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:

[shell]sass –watch source_file.scss:compiled_file.css[/shell]

You can also specify whole directories to watch and to output to, instead of single files, like so:

[shell]sass –watch source/sass:assets/css[/shell]

Once watching is initiated you should see something like this in your terminal:

Watch output of Ruby SASS

To read about all the options available via command line with Ruby Sass run:

[shell]sass –help[/shell]

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.

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:

[shell][sudo] npm install node-sass -g[/shell]

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:

[shell]node-sass source_file.scss compiled_file.css[/shell]

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:

[shell]node-sass source_file.scss –output assets/css compiled_file.css[/shell]

Like Ruby Sass, node-sass also uses the --watch flag to enable automatic compilation of your files on change:

[shell]node-sass –watch source_file.scss compiled_file.scss[/shell]

You can also specify whole directories to watch, and to output to, instead of single files:

[shell]node-sass –watch source/sass/* –output assets/css[/shell]

 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.

When you have a “watch” process running you can stop it by either:

  • Closing down the terminal
  • Pressing CTRL + C

Autoprefixer is an npm package that checks with CanIUse.com (bookmark it) 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:

[css].move {
animation: all 4s ease-in;
}[/css]

…into this:

[css].move {
animation: all 4s ease-in;
-ms-animation: all 4s ease-in;
-webkit-animation: all 4s ease-in;
-moz-animation: all 4s ease-in;
-o-animation: all 4s ease-in;
}[/css]

Read more about Autoprefixer at: https://www.npmjs.com/package/autoprefixer

Install Autoprefixer globally with:

[shell][sudo] npm install autoprefixer -g[/shell]

To autoprefix a CSS file use the following command:

[shell]autoprefixer style.css[/shell]

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 --outputflag followed by a name for your prefixed css file:

[shell]autoprefixer unprefixed.css –output prefixed.css[/shell]

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

Stylus, Ruby Sass and node-sass all have the ability to compress your CSS during compilation.

In Stylus, include the --compress flag:

[shell]stylus –compress < source_file.scss > compiled_file.css[/shell]

In Ruby Sass include the --style flag, followed by compressed:

[shell]sass source_file.scss compiled_file.css –style compressed[/shell]

In node-sass add the --output-style flag followed by compressed:

[shell]node-sass –output-style compressed source_file.scss compiled_file.css[/shell]

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 globally with the command:

[shell][sudo] npm install clean-css -g[/shell]

To clean a CSS file use:

[shell]cleancss style.css[/shell]

Note: Even though the package name “clean-css” has a hyphen in it, be sure to usecleancss 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:

[shell]cleancss -o cleaned.css style.css[/shell]

There are several other command options available for clean-css, which you can read all about at: How to use Clean CSS CLI.

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. I’m not a big fan of it personally because writing html is fun for me but if you’re into it, here’s a quick demo on that too.

Jade Banner

Read more about Jade at: https://www.npmjs.com/package/jade

To install Jade globally run the command:

[shell][sudo] npm install jade -g[/shell]

Jade, created by the same person as Stylus, uses the same basic command syntax of < and > signs to compile a file:

[shell]jade < index.jade > index.html[/shell]

This command will compile “index.jade” into “index.html” in the same directory.

To compile all the Jade files in a certain directory use:

[shell]jade dir_name[/shell]

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:

[shell]jade src_dir –out html_dir[/shell]

To use Jade’s watch function for automatic compilation on saving, pass the --watchflag right after the jade command.

For single files:

[shell]jade –watch < index.jade > index.html[/shell]

Or for full directories:

[shell]jade –watch dir_name[/shell]

[shell]jade –watch dir_name –out html_dir[/shell]

Concatenating & Minifying JavaScript Files

Share Your Thoughts

Copyright © 2011, 2016 - BWD MEDIA
Web Design & Digital Marketing Agency
Call Now Enquire