Demo Gulp PostCSS Autoprefixer

Demo of:

• Gulp tool to automate & enhance your workflow

• PostCSS tool for transforming CSS with JavaScript

• Autoprefixer plugin to parse CSS and add vendor prefixes to CSS rules

Setup

Create a Node project

Create the directory:

mkdir demo
cd demo

Initiatlize git and add typical git ignore rules for any Node softare:

git init
curl https://github.com/github/gitignore/blob/master/Node.gitignore -o .gitignore

Initialize Node Package Manager (NPM), which handles package installation, version management, and dependency management:

npm init -y

Add Gulp build system

Install Gulp, which is a build system that automates tasks for website development:

npm install --global gulp-cli
npm install --save-dev gulp

Verify:

gulp --version

CLI version: 2.3.0
Local version: 4.0.2

If gulp says "command not found", then try this help

Create gulpfile

Create a text file gulpfile.js:

var gulp = require('gulp');

gulp.task('default', async function() {
    console.log("gulp is running");
});

Run:

gulp

… Using gulpfile …/gulpfile.js
… Starting 'default'...
gulp default is working
… Finished 'default' after 2.63 ms

Add gulp-postcss

Install:

npm install gulp-postcss --save-dev

Edit gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('postcss', async function() {
    var plugin = [
        // PostCSS plugins will go here
    ];
    return gulp.src('./*.css')
        .pipe(postcss(plugin))
        .pipe(gulp.dest('./dest'));
});

Create a CSS file such as styles.css:

h1 { font-color: red; }

Run:

gulp postcss

Using gulpfile …/gulpfile.js
… Starting 'postcss'...
… Finished 'postcss' after 19 ms
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. …

Verify results:

ls dest

output.css
styles.css

Add any PostCSS plugin

Install any PostCSS plugin, such as autoprefixer:

npm install autoprefixer --save-dev

Edit gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('postcss', async function() {
    var plugin = [
        autoprefixer()
    ];
    return gulp.src('./*.css')
        .pipe(postcss(plugin))
        .pipe(gulp.dest('./dest'));
});

Edit styles.css and try a setting that will use autoprefix:

:fullscreen a {
    display: flex;
}

Run:

gulp postcss

Verify results:

cat dest/styles.css

:-webkit-full-screen a {
    display: flex;
}
:-ms-fullscreen a {
    display: flex;
}
:fullscreen a {
    display: flex;
}