For a long while working with the command line was considered to be outside the realm of web designers. It was used pretty much exclusively for things like server admin and file management and all kinds of things that have nothing to do with the average web designer’s day to day processes.
That may have been the case in the past, but today it couldn’t be further from the truth.
Nowadays, there are thousands of incredible command line powered tools available specifically for front end languages and workflows. The huge benefits they offer mean leveraging the command line is becoming an ever more essential skill for web designers.
I’ll admit, for some time after I first encountered these kinds of web design tools I was a bit “command line phobic.” I was influenced by the “for programmers not designers” idea, and I’d always found the conventional methods familiar and comfortable.
Then, finally, I made the plunge when a project I really wanted to use unavoidably required interaction via the command line. I was a little intimidated initially, but to my very pleasant surprise I quickly found myself exclaiming: “This is awesome, I don’t know why I didn’t start learning this ages ago!”
Today, I use the command line in almost every web design project and I wouldn’t be without it. It’s incredibly useful in almost every stage of a typical web design process.
What We’ll Cover
But here’s the thing, even now I wouldn’t be able to do most of the things you’ll find in a typical “getting started with command line” tutorial if my life depended on it. If you never learn how to
ls it doesn’t matter. The truth is, as a web designer you really don’t need any of that stuff. The only command line skills you need are those which directly facilitate making your web design projects more efficient.
That’s why this series isn’t about “how to run obscure commands for tasks you never do.” Nor is it a “complicated dev process made easy for designers” type of a deal. This is a five part series specifically for web designers, showing you how to utilize tools that are incredibly useful specifically for web design projects.
Once you start bringing the command line into your design processes it’ll open up a whole new world of options, save huge swathes of your precious time, and, I promise, you’ll never look back.
Why Command Line is Great for Web Design
Across this series of tutorials you’ll learn command line driven processes that might just change the way you approach web design permanently.
After getting you started with the basics we’ll jump straight into practical skills you can use right away. When you take a look at each of the topics we’ll be covering, you’ll begin to see a picture forming of why command line is such a must-have tool for web design.
Let’s quickly run through the topics we’ll cover during this series. There are five main subject areas:
If you’ve never used a command line before and dread it, we take you step by step to make sure you’re on level with us. This part will cover starting terminal, starting terminal in a specific directory and dealing with common errors
2. Installing 3rd Party Packages
Web designers often use third party packages like jQuery, Bootstrap, Modernizr, Font Awesome,and a long list of others. Before the command line, utilizing these external packages normally meant:
- Maintaining a list of site bookmarks where you could download the latest version of each package.
- Manually visiting said websites to download packages every time you needed them.
- Repeating the process all over again whenever a package was updated.
- Manually transferring the updated version into every project it was used in.
Dealing with package management manually is slow and unwieldy, but with the command line that’s a thing of the past.
You can pull packages directly into your projects just by typing a few words, like:
bower install jquery
You can keep packages up to date by typing a simple set of words like:
bower update jquery
No more manually downloading packages from the web or manually upgrading them when they’re changed, and that’s just a small taste of the things you can do through command line package management.
3. Powering Up Front End Code
One of the most powerful things we can utilize command line for with CSS is to compile preprocessors, like Stylus, Sass / SCSS and LESS. With the command line you can quickly compile any preprocessor file by typing a few words. You can also set up automatic compilation so your CSS files are recompiled whenever you change your preprocessor files.
And for HTML, we get access to languages like Jade which gives us both the ability to write HTML in shorthand, and the ability to develop simple yet sophisticated templating systems to prevent us having to rewrite chunks of code that repeat throughout projects.
4. Automation with Task Runners
By using something called a “task runner”, a single word command like
grunt can be set to compile your preprocessor files then combine, autoprefix, clean and compress the resulting CSS, after which your Jade files are compiled into HTML, and your JS files concatenated and minified–all in the space of a few seconds.
You can also setup task runners to handle these things hands-free for you. After running a command like
gulp watch or
grunt watch you can just go ahead and work on your project’s raw files while, in the background, all the compilation and optimization is handled for you automatically.
Task runners are completely flexible and can be configured however you want, so there is no end to the ways in which you can set your projects up. Simply fine tune things to suit each set of circumstances as needed.
Right then. Grab a cup of coffee and get ready for the next part of this awesome series.