Wilson Mar bio photo

Wilson Mar


Calendar YouTube Github


Let me do that for you

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean



From a Terminal shell window on any folder:

  1. Install Node (NPM), because Gulp is based on Node.js, with several modules.

  2. Install the Gulp task runner:

    npm install –global gulp

    The response I got is too long to list here.

    npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
    npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
    /Users/mac/.nvm/versions/node/v6.4.0/bin/gulp -> /Users/mac/.nvm/versions/node/v6.4.0/lib/node_modules/gulp/bin/gulp.js
    `-- gulp@3.9.1 

    There’s not much you can do about deprecated dependencies. In fact, the beauty of NPM is that the exact version of each dependency is provided, as desired (and hopefully tested) by the module being installed.

  3. Navigate to your project (replacing “myjekyll” with your project name):

    cd myjekyll

  4. Install Gulp into devDependencies:

    npm install --save-dev gulp

    --save-dev makes it local to the current project folder.

    This creates a “node_modules” folder containing dependencies downloaded.

    It looks for the “package.json” file created for each node project.

  5. Add the gulp utilites plugin to make runs visible:

    npm install --save-dev gulp-util

    It enables gutil.log in the code below.

Basic script

  1. Use a text edit/IDE to create a gulpfile.js in your project’s folder.

    var gulp = require('gulp');
    var gulp = require('gulp-util');
    var gulp = require('gulp-shell');
    gulp.task('default', function () {
        return gutil.log('Gulp runs!')

    Modules required to be installed (below) are defined first.

    PROTIP: One can separate several requires together and separate them with commands under a single var. But individual var statements are easier less error-prone to copy and paste.

    Gulp only has 4 top-level functions: task, src, dest, watch.

    • gulp.src points to the files to use. It’s parameters are globs and an optional options object. It uses .pipe for chaining it’s output into other plugins.

    • gulp.dest points to the output folder to write files to.

  2. Run gulp, which always looks for a file named ‘gulpfile.js’ to execute.


    TROUBLESHOOTING: If you see an error like this:

     throw err;   
    Error: Cannot find module 'gulp-shell'

    This means the module needs to be installed.

  3. Add the gulp shell plugin:

    npm install --save-dev gulp-shell npm install --save-dev browserSync

    Gulp for Jekyll

  4. Use a text edit/IDE to create a gulpfile.js in your project’s folder.

    Below is a sample (from Gary Simon) to process a Jekyll-based website source:

    var browserSync = require('browserSync').create();
    var uncss = require('uncss');
    gulp.task('build', shell.task['jekyll build --watch']));
    gulp.task('serve', function () {
       browserSync.init({server: {baseDir: '_site/'}});
       gulp.watch('_site/**/*.*').on('change', browserSync.reload);
    gulp.task('default', ['build','serve']);
    gulp.task('post', function () {
       browserSync.init({server: {baseDir: '_site/'}});
          html: ['index.html','posts/**/*.html','_includes/*.html','_layouts/*.html']

Each Gulp task has two parameters: a step name and what Gulp is to do.

Gulp is a streaming build system, by

Gulp uses node’s streams file manipulation is all done in memory,

A file isn’t written until you tell it to do so.

Install modules

Before making use of the modules required, install them:

npm install --save-dev gulp-uncss npm install --save-dev gulp-minify-css

`--save-dev` makes it local to the current project

Run it

gulp post

The response:

   Using gulpfile ...
   Starting 'post'...

IDE Integration

Gulp in Visual Studio 2015:

  • http://blog.chrisbriggsy.com/Gulp-101-CSS-all-the-LESS/

    ## Watch #

    gulp.watch listens for changes in files fitting the path defined in the first parameter, and if there is a change, invokes the scripts in the 2nd parameter.

     gulp.watch('source/javascript/**/*.js', ['jshint']);

    gulp.watch (like gulp.task) has two main forms. Both return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it’s parameters.


  • Gulp API docs defines the various functions.

  • @chanfastic’s Gist

  • The last module of <a target=”_blank” href=”https://app.pluralsight.com/library/courses/custom-jekyll-theme-2372”> Creating a Custom Jekyll Theme</a> by Gary Simon Advanced Jan 20, 2016 2h 3m

  • https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

More on front-end software development

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau