fbpx

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.

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

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/

Categories: Technology

4 Comments

blog · April 25, 2020 at 12:03 am

Excellent blog here! Also your site loads up very fast!
What host are you using? Can I get your affiliate link to
your host? I wish my website loaded up as fast as yours lol

    Kostas Mavrokefalos · April 25, 2020 at 6:06 am

    hi, thanks for reading! I am on a shared hosting here nothing exotic, but the speed has been the outcome of Performance optimization and caching. First find a Theme that loads fast and then optimize your images and cache your CSS, JS etc. I am using Inmotion shared hosting for this Blog and Breeze Plugin for caching. Send me your Website’s url , i might be able to suggest some tips.

myexamsite.com.webstatsdomain.org · April 26, 2020 at 11:42 am

I don’t unremarkably comment but I gotta state appreciate
it for the post on this great one :D.

    Kostas Mavrokefalos · April 26, 2020 at 2:36 pm

    Thanks for the appreciation! Let me know how you intend to use this article. Do you plan to build a Website or use Gulp as an automation handler for optimization tasks?

Leave a Reply

Your email address will not be published. Required fields are marked *

Task already exist for this element.
Write your message in the existing thread.
Here, we opened it for you.
General
Reset
Reset
Share Page Link :

    Commenting enabled

    General TaskCancel
    ×
    General Tasks are meant for requests that are not about a specific part of the page. To create a specific request, close this box and click the plus icon on the right to choose any part of the page.
    For more generic requests, go ahead and send your message.
    WP Feedback

    Dive straight into the feedback!
    Login below and you can start commenting using your own user instantly