LearnYoga

Gulp ch. 2 - Autoprefixer plugin

In chapter 1 of this Gulp lesson, we created a basic GulpJS setup that can process a number of different kinds of files. A number of different tasks each enable file processing based on a specific Gulp plugin from NPM. But what if we wanted to add another task that isn't included in the Gulpfile from the previous chapter? We would search the Gulp plugins page to see if we can find the functuonality we want there.

For this chapter we will be adding an Autoprefixer task. When run it will go through the CSS files in the /lib directory and process them using the gulp-autoprefixer plugin, resulting in CSS files in the /dist directory with the same code but with 'vendor prefixes' added to CSS elements, properties and values which are still new enough to be only implemented under browser-specific tags. This allows developers to write CSS with numerous futuristic features only using the non-browser-specific tag and be assured that the features should work effectively in different browsers.

Let's open the terminal and go to the directory of our Gulp install from chapter 1. Now let's type this in to add the gulp-autoprefixer plugin:

sudo npm install gulp-autoprefixer --save-dev

This should add the plugin to our node-modules directory and add it to our package.json. Now we need to edit our Gulpfile. Open your Gulpfile.js and delete all of the current code and replace it with this (in reality you may notice that we are actually just adding a few lines, if you feel like editing it that way):

//	This is the JavaScript code for the example Gulpfile from Gulp lesson ch.2 on http://pacificio.com
//	It can be saved as 'Gulpfile.js' in the root of the project

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var minifyCSS = require('gulp-minify-css');
var markdown = require('gulp-markdown');
var coffee = require('gulp-coffee');
var tsc  = require('gulp-typescript-compiler');
var babel = require("gulp-babel");
var g_autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
  // place code for your default task here
});

gulp.task('uglify', function() {
  gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

gulp.task('less', function() {
    return gulp.src('lib/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist'));
});

gulp.task('sass', function () {
    gulp.src('lib/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist'));
});

gulp.task('jade', function () {
    gulp.src('lib/*.jade')
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

gulp.task('minify', function() {
  return gulp.src('lib/*.css')
    .pipe(minifyCSS({keepBreaks:true}))
    .pipe(gulp.dest('dist'))
});

gulp.task('markdown', function () {
    gulp.src('lib/*.md')
        .pipe(markdown())
        .pipe(gulp.dest('dist'));
});

gulp.task('coffee', function () {
    gulp.src('lib/*.coffee')
        .pipe(coffee())
        .pipe(gulp.dest('dist'));
});

gulp.task('typescript', function () {
    gulp.src('lib/*.ts')
        .pipe(tsc())
        .pipe(gulp.dest('dist'));
});

gulp.task("babel", function () {
	return gulp.src("lib/*.js")
		.pipe(babel())
    	.pipe(gulp.dest("dist"));
});

gulp.task("autoprefixer", function () {
	return gulp.src("lib/*.css")
		.pipe(g_autoprefixer())
    	.pipe(gulp.dest("dist"));
});

We should still have a CSS file or two from the previous chapter right? Then we can try the task, although keep this in mind: as time advances the small handful of vendor prefixes which will distinguish the CSS files in the /dist directory from the ones in the /lib directory will likely vanish as the need for them does. So maybe look for a CSS file with some current next-gen features and try putting that in your /lib directory. Now type this into your terminal while still in the root of your directory:

gulp autoprefixer

If as expected new prefixed versions of the stylesheet[s] in the /lib directory materialize in the /dist directory then you have successfully added the autoprefixer task [note that previous versions of the CSS files will be overwritten in the /dist directory].

Up next: chapter 3 updates the gulpfile for the way the Babel plugin now behaves and more