Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like gulp and grunt can seem daunting at first. So, I've decided to showcase my go-to setup for gulp and explain what the heck it does step-by-step.
+
Here is the final gulp.js file in all it's glory:
+
var gulp = require('gulp');
+var shell = require('gulp-shell');
+var sass = require('gulp-sass');
+
+/* Build and watch Jekyll (change this task to whatever you need) */
+gulp.task('generate', shell.task('jekyll serve'));
+
+/* Compile SCSS files to CSS */
+gulp.task('styles', function () {
+ return gulp.src('_includes/assets/sass/styles.scss')
+ .pipe(sass({
+ outputStyle: 'compressed'
+ }).on('error', sass.logError))
+ .pipe(gulp.dest('_includes/assets/css/'));
+});
+
+/* Compile the assets */
+gulp.task('assets', gulp.parallel(
+ 'styles'
+));
+
+/* Build */
+gulp.task('build', gulp.series(
+ 'assets',
+ 'generate'
+));
+
+
Trust me, it's not complicated at all.
+
Grabbing what we need
+
For our basic build file we are going to need only three modules: gulp, gulp-shell and gulp-sass.
This is the streaming build system, without it we can't do anything else.
+
gulp-shell
+
A gulp command line interface for us to interact with our terminal.
+
gulp-sass
+
Required for gulp to compile Sass into vanilla CSS.
+
Bonus tasks
+
You can also toss in gulp-minify to clean-up any JavaScript you might be using, but for this example we're just going to keep things simple and focus on Sass only.
+
Maybe I'll write about my js build workflow in a future article.
+
Generating the build
+
Our first step is to create the default task that will generate our build. In this example we are making the assumption that we're building a Jekyll website (but you can place any build command here):
Don't worry if this generate isn't clear, we come back to that later.
+
Processing our pre-processor
+
We will name this next task styles since that's what it outputs - our styling. We start by telling gulp where our main scss directory is:
+
/* Change this directory to match yours */
+return gulp.src('_includes/assets/sass/styles.scss')
+
+
This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory: