Writing maintainable CSS can be a tough cookie. CSS has the tendency to quickly spiral out of control. Before you know it you find yourself between managing way too many specific selectors and hundreds of deprecated vendor prefixes. Technologies like SASS and AutoPrefixer can help you get out of this uncomfortable situation, but to get there, you’ll have to jump some hoops.
Setting up NodeJS
- Install NodeJS, it’s very easy as it is packaged as a nice installer.
- Open a Terminal window. I can imagine you might be uncomfortable using the Terminal, if so, just take your time, you’ll get the hang of it. To get started, read introduction to the Terminal by Jim Hoskins.
- Now, navigate to your project directory. If you don’t know how to do this, no worries, the article I mentioned in the previous step will explain further.
- Run npm init, this will create a “package.json” file. This file contains the name of your project, the description, version, dependencies, license and some other stuff. If you’re lazy just jab return like a madman and it will use defaults for everything.
Now, about that “npm” command. NPM stands for Node Package Manager, it’s used to install node packages from npmjs.org, this we’ll be doing in a couple of seconds.
We’ve finished setting up NodeJS and are ready to install Gulp and some of it’s tasks. Good stuff!
Getting ready to Gulp
Gulp is there to take commands. You just give it a list of things to do and in what order to do them and it will just handle it all like a pro and report back to you on it’s progress.
- Type npm install --global gulp to install the Gulp CLI. This makes it possible to run your future gulp files using the “gulp” command (CLI stands for Command Line Interface, so there you go).
If you run into any errors, you might have to execute this command as administrator. Just prepend sudo and run again. sudo npm install --global gulp.
In any case, you don’t have to do this for each project, once you’ve installed Gulp CLI you’re all set for happy times.
- Now we’ve got our CLI setup, lets add Gulp to your project. Type npm install --save-dev gulp to get this over with. We need this to use the Gulp API in your gulp file.
Notice that the package.json file has been updated and Gulp has been added as a devDependency (that’s because of the –save-dev command). Also, a node_modules directory has appeared out of thin air. This directory will contain all installed node modules for this project (better stay out of there).
- Next we’ll have to setup that gulp file we keep talking about. Create a new file in your poject root called “gulpfile.js”. Yes, Gulp is that literal.
Use your copy paste skills to move the following code to the newly created file.
You can now execute this file by running Gulp from your terminal. Give it a go, open your terminal, navigate to your project folder (if you’re not already there) and run the gulp command.
Gulp will look for a “gulpfile.js” in the same directory and run it. Within a couple nanoseconds your terminal should read Hello World.
Adding tasks like there’s no tomorrow
Now for the good stuff, we’re going to add all the CSS related tasks we need Gulp to run for us.
Setting up SASS
SASS, a way to use variables in your CSS, nest selectors, write mixins, loops and use all that other over-the-top tech you always dreamed of. But, with great power comes great responsiblablabla. Seriously though, this stuff is like cocaine, so take it easy.
Okay, focus, run npm install --save-dev gulp-sass to add the SASS task to your project.
Now let’s alter our “gulpfile.js” a bit. Time to use those Kung Fu copy paste skills once more.
Run the gulp command again and you’ll see a styles.css file has been created in the /static/css directory. Excellent.
Getting rid of those prefixes
Still things could be better, we’ve got our SASS magic, which is great and all, but AutoPrefixer that’s where things really start moving in the right direction.
Run npm install --save-dev gulp-autoprefixer to add the AutoPrefixer task to your project. Adding modules really is this simple, I can’t get enough of it. View the small code changes to the gulp file below.
Same trick as last time, run gulp and presto, vendor prefixes are now automatically added to styles.css.
Automating the build
Now, we don’t want to have to run the “gulp” command each time we’ve changed one of our “.scss” files. So let’s automate this whole process.
Run gulp and start developing. Gulp will keep running allowing you to relax, grab coffee, and write some truly awesome CSS without the maintenance nightmare!
If you ever want to stop that Gulp task, just jab Ctrl+C
We’ve done it! We’ve written a simple GulpJS script and are now running a SASS, AutoPrefixer and watch task. It’s the perfect stepping stone to start adding more tasks which will make developing websites even easier.
You can view the gulp file and example code on GitHub.