The Quiet Musings

A Gulpfile for getting started

- July 17th, 2017 -

Every time I start a website project I start first with flat-file pages. HTML and CSS, nothing else. Only after I’m happy with the structure and basics will I merge it into a CMS theme, mostly WordPress.

SASS has become unmissable for me. Although I still do go back to CSS when learning new things like Flexbox or CSSGrid, SASS is my go to when coding. It’s just faster.

I’m not a fan of using tools and frameworks for everyting without a good reason. I like to know what I’m doing, being able to understand all the code, because I coded it and to keep the code simple. But Gulp has become my favorite tool because it helps streamline my coding process and saves time. To think I only got into Gulp to use autoprefixer because SASS mixins wasn’t working.

Now I just keep a good gulpfile to be able to start a new project easily.

Installing Gulp is pretty straight forward. Just follow step 1 to 4 explained in Getting Started with Gulp.

Run npm init in your new project folder. Fill out your project details. Add your packages and gulpfile.js and get coding.

I use the following packages in my basic Gulp workflow:

I keep my gulpfile.js in a Bitbucket repository. Feel free to use it, improve and expand on it. My goal is to learn and get more out of Gulp.

Like finding out how to integrate DPLOY into my gulpfile, if it is even possible. Or how about adding Twig templating? Markdown to HTML? Actually, I just want a flat-file CMS that runs on one gulpfile.js Crazy?

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.