Gulp, Autoprefixer and SASS

October 7th, 2015 // •

Recently I started my first project with CSS flexboxes. I always try to keep my work flow ‘simple’. Although ‘simple’ can be defined differently for everyone. For me it is vanilla SASS through the terminal and hand code in the Atom editor. I recently started using GIT, I know enough to commit and push my code (again through the terminal), thus using the repository as my cloud backup. I still use plain ole FTP to upload my files to the hosting server.

Hey, I run small web projects, no need for the whole deployment she-bang. Although it would be nice to have a smooth deployment environment for small to medium websites.

Anyhow, back to my autoprefixer problem.

Flexbox requires a lot of browser prefixes and ain’t nobody got time to type down those all day long. Most prefixes SASS mixins won’t do the trick because they use @extend which cannot be used inside @media. And with no @media there is no responsive website. My best option was using autoprefixer which needs Grunt or Gulp, both which in turns needs Node. Man, life of a front-ender gets more complicated with each new technique.

First I needed to decide Grunt or Gulp? I did a quick online search and this article helped me make a decision – Gulp vs Grunt. Why one? Why the other?

Gulp on the other hand is all about streams and building complex pipelines with ease. It uses node.js’ streams, and executes faster, since it does not open/close files, or create intermediary copies all the time.

If you have never used Gulp or Grunt it can get really frustrating. I’m good at installing and setting up environments but I get stuck in the details. I used the following installation guide to install Gulp on my Macbook with Maverick and on my Mac Mini with Yosemite. Getting started with Gulp by Travis Maynard.

My setup in Gulp is with SASS and Autoprefixer only. I got totally stuck with my gulpfile.js for which I got help. This is my current code:

gulpfile.js


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

var input = 'sass/**/*.scss';
var output = 'css';

gulp.task('sass', function () {
gulp //add gulp without return to keep session going
// Find all .scss files from the sass/ folder
.src(input)
// Run Sass on those files || pipe adds everything together
.pipe(sass().on('error', sass.logError)) //error log to keep session going when scss contains error
.pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
// Write the resulting CSS in the output folder
.pipe(gulp.dest(output));
});

gulp.task("default", ['sass'], function() {
gulp.watch(input, ['sass']);
});

Basically I just want to run ‘gulp’ in the command line once, have it watch my sass file without breaking the session if there is an error in my sass file, add autoprefixer and done.

Obviously I want to expand my gulpfile later with more things like, minifying. And getting a better hang of using pipes and running only one task without the others. gulp-sass also has issues with @import inside a @mixin. I had to import Google fonts directly instead of using a mixin to set the details. So, still plenty to figure out with Gulp.

Comments are closed.