Knowledge

Embracing the command line

Published on December 09, 2015 under Technology, Web Development

It was in 2013 that I walked into a meeting with my employer’s development team (my role in the company is mainly design), and I witnessed something in how they worked that surprised me. The developers were using the command line terminal to perform aspects of their work. Now I know today it’s a standard, but back then I never would have fathomed this for web development.

With the new age of version control systems such as Git, and task-running platforms like Grunt or Gulp, it makes complete sense why web developers have brought the terminal back into our work. I’ll admit I carried a reluctance, feeling that the command line is “old tech” in today’s world of GUI-based software, but I’ve seen the light, and want to share my insights on how and why you should take the plunge.

Version control is the standard now

If you’re not using some kind of version control in your web development, then you might want to reconsider. I know for a lone developer, it’s easy to just think saving a copy of your files on a second drive is enough, but our work spans way beyond the simple freelance gig where you’re doing it all. Team environments and agile development are a part of life, and thus knowing how to use a version control system (Git, Subversion, Mercurial, etc.) is crucial to staying relevant in this industry.

When I crafted the website for Revolt Amplification, I took it as an opportunity to learn how to use Git. Granted I used a GUI-based app (SourceTree), but walk into most companies now and managers will want developers who are comfortable in the command line. Ask any experienced dev and they’ll simply say how much easier command line is for them.

I honestly think using the terminal for version control is not something you should overlook or put off. Even now I’m pushing myself to be able to use Git in the command line, even if I choose to keep using SourceTree for future work.

Task Runners are amazing

As content as I could have been using SourceTree for version control, what finally drove me to the terminal was the new age of what are called task runners. They’re small programs, usually written in JavaScript, that are designed to do as they are named. They run small tasks to save you time.

For instance, do you write your stylesheets in .LESS or SCSS? How then do you compile them into the final CSS files you’ll put online?

How about code minification? Do you even bother to do this with your JavaScript and CSS? If not you should, merely to cut down file bandwidth.

So you might think there are some downloadable apps you could easily use to compile your CSS and minify your code. However, do you want to go through a series of apps every time you wish to deploy a website build?

Just to illustrate, imagine you tweak the code in your SCSS files and one of your JavaScript files. Now you have to go to your one app to compile the CSS. You might need then another to minify it, as well as one for the JavaScript. Think about how many pieces of software you’re jumping around in before you can test or deploy. Not efficient, especially if you have to do this multiple times to account for mistakes or errors.  Imagine instead writing one piece of code that will go through a series of tasks that will bring you finished compiled code, ready for testing or deployment.

Currently, there are two task running systems that are the most popular: Grunt and Gulp. I ended up choosing to learn Gulp mainly out of how support for Grunt is slowly diminishing. Through Gulp and its library of plugins, I can write one JavaScript file that will quickly compile my CSS, minify it, minify and even combine all my JavaScript files into one file, and set everything up in a “distribution” folder that I’ll upload online. I could even go further and have a plugin compress all my images, so I don’t have to in Photoshop. That’s convenience.

Taking the plunge

So if you’re now convinced to let go of your command line fears, then I suggest you start with Node.js. It’s basically a JavaScript runtime, which in laymen’s terms is a set of routines and tools programmers can use to build other programs with.

Now if you’re mainly about front-end design and development, you might not get a lot out of Node as a system. Most of Node’s power and favorability comes from it’s package management software, NPM. Again, in laymen’s terms, it’s a system that allows you to quickly download and install those Gulp plugins I mentioned before, as well as Gulp (or Grunt), and many other JavaScript-based programs and libraries you might use in your development.

The idea is that instead of you finding a website, downloading a file, placing it in a specific folder, and making sure it’s “connected” up with your work, you instead let NPM do it for you with one simple command line in the terminal:

$ npm install moduleName

That’s the basic command.  So you would replace moduleName with whatever it is you wish you use. It could be Gulp, or Grunt, or any of its plugins. It could be libraries such as Angular or React, or anything online as an NPM package.

Now I’m not going to go into great detail on how to use all this. Not when there are well-crafted explanations that helped me. For Node.js, I’d suggest starting with this great article from Sitepoint on how to setup Node. Unfortunately for us Windows users, much of the literature was geared towards Macs. Some will try a UNIX command line emulator like Cmder, but I also found some great tips on StackOverflow for using Node in Windows. In all honesty, beyond the OS-specific command line quirks, all the kinds of commands you would use in Node, Gulp, and Grunt are the same.

Those will help you learn the basics of installing Node and using NPM.  If you want to dive in deeper, check out nodeschool.io. They have a great tutorial that runs in the terminal and teaches you through examples. If anything, try their JavaScript tutorial if you need to brush up.

Lastly, if you wish to try out Gulp, I suggest this article from CSS Tricks to get you started. For Windows users, London-based developer Ollie MacFarlane wrote up a nice guide on getting you started in Gulp.

It’s a brave new world we’re in, and thus we move on to the next evolution of web development with the command line.

Do you use the command line for web development? How about task runners?

Tags: web development, command line, node, npm, gulp

comments powered by Disqus