Auto CSS prefix with Gulp

A short tutorial for beginners, with examples

Gulp is a front-end toolkit that runs on JavaScript. Before I learned Gulp, I used to type CSS vendor prefixes one by one, or paste large chunks of CSS into online auto-prefixer sites just to get the prefixed output. You can still do that—but after this short tutorial, I bet you'll never want to again. Instead, you'll fall in love with this brilliant toolkit, Gulp.

Start off

So what can we do with Gulp?

• Create sprite images
• Combine media queries in CSS
• Minify or beautify your JavaScript and CSS files
• Compress your HTML files
• Compile Sass, Less, Stylus, PostCSS, Pug
• And so on…

How to install

Before you start, install Node.js if you don't already have it.

To verify the install, run node -v and npm -v to check the versions. Then run:

npm install -g gulp

If you can't find or use your command prompt, I recommend installing Git Bash.

Now that Gulp is installed globally, create a directory and install Gulp locally so you can play with it. Run:

mkdir newProject && cd newProject npm init npm install --save-dev gulp

mkdir creates a directory; newProject is its name. Unlike npm install -g gulp, npm install --save-dev gulp installs Gulp into the newProject directory locally.

Create your first gulpfile.js

Create gulpfile.js in the newProject directory you just made. Paste the gist below into the file and save.

In the command prompt (or Git Bash), run:

gulp taskname

If you see something like the image below, congrats—you've set up your first gulpfile successfully.

Your first gulpfile

In the gist above, I named the task taskname on line 3, then used that name on the command line. You can name a task anything you want, or set it as default. If the task is named default, you don't need to specify a name—just run gulp.

Play with code

Auto-prefix your CSS code with Gulp plug-ins

You can find tons of Gulp plug-ins on the Gulp website. I use Gulp to minify JavaScript files, combine CSS media queries, and automatically apply CSS vendor prefixes. In this tutorial, I'll show you how I use Gulp's auto-prefixer.

Run the following command to install gulp-autoprefixer locally into your directory:

npm install --save-dev gulp-autoprefixer

To test it, create a CSS file in the same directory with a property that needs vendor prefixes:

Go back to your gulpfile.js and paste the snippet below.

Note: always keep const gulp = require('gulp'); at the top of your gulpfile.js.

I named the task prefix, so you can run it with gulp prefix. You can configure the supported browser versions on line 6.

• gulp.src points to the source folder where the original files live.
• gulp.dest points to the destination folder where the processed files will be placed.

Now run the task and watch how the CSS changes:

gulp prefix

That's it! Browse the Gulp website for plenty of other useful plug-ins. Some of my recommendations:

• gulp-htmlclean
  HTML/SVG cleaner that preserves structure
• gulp-clean-css
  Minify your CSS files
• gulp-uglify
  One of my favorites — a JavaScript minifier

Takeaway

I hope you enjoyed this short tutorial on Gulp. To get in touch, visit my LinkedIn or email ghsspower@gmail.com. Thanks!