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.
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
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
to ensure it has installed properly.
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:
- Extract the downloaded archive
- Open a terminal window
- Navigate to where you extracted the archive
and wait patiently
sudo make install
And you’ll be all set with Node.js.
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, 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
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.