How to install Zurb’s Foundation 6 with SASS compiler using the CLI on an Ubuntu PC p.2

In the second part of the Tutorial Install Foundation 6 on Ubuntu using cli, I will cover the use of Gulp as an automation handler.

Gulp can help you perform tasks that would otherwise need extra work after you have finished coding and would need to do them every time from scratch. So it can significantly improve your Workflow and reduce time spend on various tasks.

I will focus on the Foundation 6 Framework, i don’t intend to describe Gulp in general, as this is not the the scope of the Tutorial. What is useful, is to learn the basic structure of a Gulp file and show how somebody can add more features using the Gulp plugins.

We should know that since we installed Foundation 6 using the CLI in the Previous Tutorial, this means we already have installed Gulp and there is also a Gulp file in our Project’s root folder.

The file you get by default is written further with my explanation on each line after the //:

var gulp = require('gulp');//we require the gulp to be present

var $ = require('gulp-load-plugins')(); //Automatically load any gulp plugins in your package.json

var sassPaths = [ //declare variables regarding our files paths we want to update every time Gulp executes

'bower_components/normalize.scss/sass',

'bower_components/foundation-sites/scss',

'bower_components/motion-ui/src'

];

gulp.task('sass', function() { // we declare our first gulp task

return gulp.src('scss/app.scss')

.pipe($.sass({

includePaths: sassPaths,

outputStyle: 'compressed' // if css compressed **file size**

})

.on('error', $.sass.logError))// error handling

.pipe($.autoprefixer({

browsers: ['last 2 versions', 'ie >= 9']

}))

.pipe(gulp.dest('css'));

});

gulp.task('default', ['sass'], function() { // Creates a watcher that will spy on files and compile css

gulp.watch(['scss/**/*.scss'], ['sass']);

});

In case you need to add some more tasks, all you have to do is add this code at the end of the file:

gulp.task('default', function() {

// place code for your default task here

});

So, if, for example, we need to minify our images, then

1. We install the Gulp Plugin: gulp-imagemin $ npm install --save-dev gulp-imagemin
2. Add const imagemin = require('gulp-imagemin'); on top of gulpfile.js after var gulp = require('gulp');
3. Add in the end of the gulpfile.js:
   • • gulp.task('minify-images', function() {
     • gulp.src('{your_images_directory_path}}/*')
     • .pipe(imagemin())
     • .pipe(gulp.dest('dist/images'))
     • });
4. Run all tasks: gulp.task(['task1_name', 'task2_name', 'task3_name']);

After that, you need to restart Gulp and re-run gulp command again on the Terminal.

This is the end of this tutorial. Of course gulp is huge and can be used to do whatever you like so check the links and add to the above process.

Enjoy!

Resources:
The top image was downloaded from:https://alpha.wallhaven.cc
Stream Handbook: https://github.com/substack/stream-handbook
Gulp: http://gulpjs.com/