Automating Web Development - Tools

I’ve been working on a new DNN skin for a while now and much progress is being made. Along the way, I’ve learned about tools that can help speed up website development drastically. In this blog post, I’ll give an overview of these tools and how to use them by themselves and together to harness the power of automation and simplify development tasks.

Tools

• Ruby
• Sass (or Less)
• Node.js
• npm
• Bower
• Grunt or gulp

Ruby

We won’t be using Ruby as a programming language, but we will be needing it to install SASS.

If you’re on Windows, head here to download the latest version of Ruby: http://rubyinstaller.org/

If you’re on Linux or OS X, you can find instructions here: http://rvm.io/rvm/install

Or, after installing cURL, run this in a terminal window:

\curl -sSL https://get.rvm.io | bash

Once Ruby has finished installing, no matter what platform you’re on, open a terminal window and run

ruby -v

to ensure it has installed properly.

Sass (Syntactically Awesome Style Sheets) or Less

Sass is basically CSS with a ton of awesome features layered on top. Using Sass, which compiles to clean and efficient CSS, one can make use of extended abilities like variables, mixing, inline imports, and more.

There is another CSS extension called Less, which is an alternative to Sass. I prefer Sass, but you could definitely adapt this tutorial to work with Less as well.

Anyhow, now that Ruby is installed and ready to go, installing Sass is easy.

In a terminal window, type

gem install sass

Once that is finished, run

sass -v

to ensure it has installed properly.

Node.js

Node.js is tool that allows one to write simple JavaScript programs that create powerful applications.

We’ll be using Node.js to power npm (node package manager), Bower, and Grunt.

Head over here to grab the proper download for your platform: http://nodejs.org/download/

To install Node.js on Windows or OS X, simply run the installers.

On Linux, you can build Node.js by using these steps:

1. Extract the downloaded archive
2. Open a terminal window
   1. Navigate to where you extracted the archive
   2. Run

      ./configure

   3. Run

      make

      and wait patiently
   4. Run

      sudo make install

And you’ll be all set with Node.js.

npm

npm is the official package manager for Node.js. What this means is that using npm, one can install hundreds of different applications and tools that are built with Node.js.

We’ll be using npm to install Bower and Grunt.

npm comes installed with Node.js, so there are no additional steps required to install it.

Bower

Bower, much like npm, is a package manager. However, npm only deals with Node.js packages while Bower titles itself “a package manager for the web.” Using Bower, one can run a simple terminal command to download and install many different web libraries or frameworks, such as jQuery, Bootstrap, FontAwesome, and more.

To install Bower, open a terminal window and type:

npm install -g bower

(The -g flag is to install bower globally, so we can call it from the command line anywhere)

Grunt or gulp

Grunt is a task runner that performs the time-consuming, repetitive tasks that come along with website development like minification, SASS compilation, and more. 

Thanks to npm, Grunt is just as easy to install as Bower:

npm install -g grunt-cli

gulp (don’t you ever capitalize that g) is a similar tool that should provide better performance than Grunt because it uses Node.js’s streams.

npm comes in handy once again. Install gulp with:

npm install -g gulp

Beginning Automation

Now that we have all of the tools we need to begin, we can finally start creating an automated build system.

There are tasks associated with web development that quickly become repetitive and mundane. Thankfully, we will no longer have to do these manually!

The tasks that we can now automate are (in no particular order):

• Sass (or Less) compilation (converting our Sass or Less to standard CSS)
• Concatenation (combining multiple files into one)
• Minification (smushing text together to reduce the size, making it load faster)
• Linting (automatically checking code for errors)
• Copying of files (like fonts)
• Adding vendor-specific prefixes to our CSS (ensuring compatibility across browsers)
• Detecting features that we require a user’s browser to have
• More that I can’t think of!

And best of all, the build system will be smart enough to understand when a particular file changes to prevent rebuilding the entire thing.

Stay tuned for the next article! For now, you can always take a look at DMC's Web Application Development services, where we can harness the technologies outlined above for your needs.