Download source code from Github
Introduction
Core Feature of Gulp
- Minification
- Concatenation
- Vendor prefixes
- Less to CSS compilation
- Optimizing 3rdparty and custom code
- Injecting files into HTML
- File revisions and versioning
- Caching Angular templates
- Testing
- Code analysis
It streamline your SDLC cycle more efficiently using flow of continuous integration, testing and development. It help to improve quality, deliver faster and consistent.
Difference between Grunt and Gulp
Gulp is more codish as compare to grunt which is more into configuration, so Gulp is more readable, easier to debug. Its stream based so used node more readily.
Gulp Workflow
- Fetch files to be modify
- Modify the files
- Create new files
Since Gulp is stream based, so in pipeline architecture, diagram would be as follows
Gulp API
- gulp.task == Define a task
- gulp.src == read files
- gulp.dest == write the files
- gulp.watch == watch the files when making code changes
<code>gulp.task('TaskName', [dependencyItem], function () {
return gulp
.src('./sourcePath')
.pipe(operation)
.pipe(gulp.dest('./destinationPath'));
});
</code>
-
gulp.task
<code>gulp.task(taskName [, arary of dependencies], function)
</code>
- Register a task
- dependencies are optional
- dependencies are executed in parallel not in sequential order
- Actual task is executed soon after completion of dependencies
-
gulp.src
<code>gulp.src(file path [, options])
</code>
- Fetch set of files to be modified
- Wildcard operators may be used to emit/add files
- Optionally specify options to apply to set of files (e.g. how much of path to be retained)
-
gulp.dest
<code>gulp.dest(output folder path [, options])
</code>
- Modified files are written to destination output folder
- Write piped files to new file or same file
- Optionally specify options to apply to set of output files or folder
-
gulp.watch
Used to monitor files when altering code during development
<code> gulp.watch(file path [, options], [task name])
</code>
- Execute single or multiple tasks for the files matched with the file path
-
Optionally specify options to apply to set of files
<code>gulp.watch(file path [, options], CallbackFunction)
</code>
-
Execute call back function for the files matched with the file path
- Optionally specify options to apply to set of files
Installation
Key players
- Visual Studio
- NodeJS
- NPM
- Bower
- Gulp
Step 1: Installer
Please note you may also use chocolatey for installing nodejs and github
"Chocolatey is a package manager for Windows (like apt-get but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer."
Chocolatey
<code> choco install nodejs
choco install nodejs.install
choco install git
choco install git.install
</code>
Step 2: Visual Studio Extensions
Optional:
Step 3: Global Node Packages
Install packages for CLI globally, This will enable glup and bower command line interfaces
<code>npm install -g npm
npm install -g bower
npm install -g gulp
</code>
Please note: NPM will be automatcially downloaded with node js installer
Step 4: Create npm and bower dependencies files
-
In order to handle server side packages, create packages.json file:
<code>npm init
</code>
-
In order to handle client side packages, create bower.json file:
<code>bower init
</code>
Step 5: Project specific Node Packages
-
gulp
<code>npm install --save-dev gulp
</code>
--save-dev store packages to devDependencies in package.json file
--save store packages to dependencies in package.json file
Step 6: Project specific Bower Packages
<code> bower install angular --save
bower install lodash --save
bower install jasmine --save
</code>
For specific version of bower packages you may used #versionNumber
<code> bower install angularjs#v1.3.8 --save
bower install lodash#v3.10.1 --save
</code>
Step 7: Add gulp config file in project
Add gulpfile.js in project and paste below code in it.
<code> var gulp = require('gulp');
gulp.task('testing', function () {
console.log('Hello world!');
});
</code>
Step 8: Executing Gulp Task
Now execute testing task in CMD (make sure CMD refer to project path)
<code> gulp testing
</code>
Style Guidelines for Gulp configuration file
-
Avoid magic strings out of gulp file in order to make things simple, maintainable and easy to read. Introduce them in gulp.config.js file for instance file path, global gulp variables, wildcard strings etc
-
Use gulp-load-plugins for lazy loading, Loads in any gulp plugins and attaches them to the global scope, or an object of your choice.
<code>$ npm install --save-dev gulp-load-plugins
</code>
Code Before:
<code> var gulp = require('gulp');
var jshint = require('gulp-jshint');
gulp.task('jshint', function () {
return gulp
.src('./file.js')
.pipe(jshint())
.pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});
</code>
Code Before:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('jshint', function () {
return gulp
.src('./file.js')
.pipe($.jshint())
.pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
});
</code>
-
Use yargs for picking up argument from CLI. Using this plugin you may get node.js command line arguments.
<code>npm install yargs
</code>
For example:
<code> var args = require('yargs').argv;
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('jshint', function () {
return gulp
.src('./file.js')
.pipe($.if(args.verbose, $.print()))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
.pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
});
</code>
Command: gulp jshint --verbose
verbose is argument to show file list
-
Use gulp-util for utility function like log(), isStream(), isBuffer(), noop()
<code>npm install gulp-util
</code>
For example:
<code> var gutil = require('gulp-util');
gulp.task('hello', function () {
gutil.log('Hello World');
});
</code>
Command: gulp hello
-
Use gulp-print for printing names of files to the console in order to check status of the gulp pipe.
<code>npm install gulp-print
</code>
For example:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('print', function() {
return gulp
.src('test/*.js')
.pipe($.print())
});
</code>
Command: gulp print
-
Use gulp-if for conditionally control the flow of vinyl objects.
<code>npm install gulp-if
</code>
For example:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var args = require('yargs').argv;
gulp.task('if', function() {
return gulp
.src('test/*.js')
.pipe($.if(args.admin, $.uglify()))
.pipe(gulp.dest('./dist/'));
});
</code>
Command: gulp if true
if user passed true as value for admin argument then js files as per source will be minfied
-
Use gulp-task-listing as first step in defualt task in order to provide an easy way to get a listing of your tasks from your gulpfile.
<code>npm install gulp-task-listing
</code>
For example:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('help', $.taskListing);
gulp.task('default', ['help']);
</code>
Command: gulp default
-
Use gulp-plumber to prevent pipe breaking caused by errors from gulp plugins, It handle error gracefully instead of .on('error', errorfunction)
<code>npm install gulp-plumber
</code>
For example:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('error', function () {
return gulp
.src('./file.js')
.pipe($.plumber())
.pipe($.uglify())
.pipe(gulp.dest('./dist/'));
});
</code>
Command: gulp error
Automation Features of GulpJS
-
JS Code Style Guide and Analysis
- Use this task in order to implement your javascript style guide and detect errors.
- Highlight all rules in your .jshintrc and .jscsrc file.
- Gulp will test javascript code from these files in order to enforce rules.
Sample Js Hint File
Sample Js Code Style File
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-load-plugins jshint-stylish gulp-util
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('jsCode', function () {
return gulp
.src('test/*.js')
.pipe($.jscs())
.pipe($.jshint())
.pipe($.jshint.reporter('fail'));
});
</code>
Execute:
<code> gulp jscode
</code>
-
less and sass compilation
- Use gulp-less in order to compile less into css before browsing
- Task will take care of variables, operators, functions, mixins etc in your less file
- You may use AutoPrefixer to add vendor prefixes
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-less gulp-autoprefixer
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('css', function () {
return gulp
.src('test/*.less')
.pipe($.less())
.pipe($.autoprefixer({ browsers: ['last 2 version', '> 5%'] }))
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp css
</code>
-
Add Javascript and CSS dynamically in main file
- Use wiredep to inject bower js and css dependencies into index.html
- Use gulp-inject to inject custom js and css dependencies into index.html
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev wiredep gulp-inject
</code>
Syntax in HTML File for wiredep:
<code> <!-- bower:css -->
<!-- endbower -->
<!-- bower:js -->
<!-- endbower -->
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var options = {
bowerJson: require('./bower.json'),
directory: './bower_components/',
ignorePath: '../..'
}
gulp.task('injectJS', function () {
var wiredep = require('wiredep').stream;
return gulp
.src('./src/index.html')
.pipe(wiredep(options))
.pipe($.inject(gulp.src('modules/home/**/*.js')))
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp injectJS
</code>
Syntax in HTML File for gulp-inject:
<code> <!-- inject:css -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('injectCSS', function () {
return gulp
.src('./src/index.html')
.pipe($.inject(gulp.src('content/**/*.css')))
.pipe(gulp.dest('./build/content/'));
});
</code>
Execute:
<code> gulp injectCSS
</code>
-
Automatic Browser Refresh
- Use BrowserSync to view live changes in html/JS/CSS to browser
- Proxy attribute should have IIS path and port
- Ghost Mode synchronize actions across browsers e.g. scroll, click etc
Browser Sync
Pre Install:
<code> npm install --save-dev gulp lodash node-notifier
</code>
Install:
<code> npm install --save-dev browser-sync
</code>
Code:
<code> var gulp = require('gulp');
var browserSync = require('browser-sync');
var _ = require('lodash');
gulp.task('browser-sync', function () {
if (browserSync.active) {
return;
}
var options = {
proxy: 'localhost:' + 3472,
port: 3470,
files: [
'./scripts/**/*.*'
],
ghostMode: {
clicks: true,
location: false,
forms: true,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'gulp-patterns',
notify: true,
reloadDelay: 1000
};
browserSync(options);
});
function notify(options) {
var notifier = require('node-notifier');
var notifyOptions = {
sound: 'Bottle',
contentImage: path.join(__dirname, 'gulp.png'),
icon: path.join(__dirname, 'gulp.png')
};
_.assign(notifyOptions, options);
notifier.notify(notifyOptions);
}
</code>
Execute:
<code> gulp browser-sync
</code>
-
Compressing Images
- Use gulp-imagemin to minify PNG, JPEG, GIF and SVG images
- Use optimizationLevel attribute to adjust compression between 0 and 7
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-imagemin
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('images', function () {
return gulp
.src('./src/images/')
.pipe($.imagemin({ optimizationLevel: 4 }))
.pipe(gulp.dest('./build/images'));
});
</code>
Execute:
<code> gulp images
</code>
-
Copy Files
- For copying files like fonts, non-compressing images etc
Code:
<code> var gulp = require('gulp');
gulp.task('delete', function () {
return gulp
.src('./src/fonts/')
.pipe(gulp.dest('./build/fonts'));
});
</code>
Execute:
<code> gulp delete
</code>
-
Delete Files
- For deleting folders and files.
Install:
<code> npm install --save-dev del
</code>
Code:
<code> var gulp = require('gulp');
var del = require('del');
gulp.task('delete', function () {
del('./build/');
});
</code>
Execute:
<code> gulp delete
</code>
-
List all task Files
- Use gulp-task-listing in order to list all tasks in your gulpjs file
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-task-listing
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('help', $.taskListing);
</code>
Execute:
<code> gulp help
</code>
-
Caching HTML Templates
- Use gulp-angular-templatecache in order to concatenates and registers AngularJS templates in the $templateCache
- All HTML files will be stored as key-value pair using angular $templateCache service
- URL of HTML will be key and html code of file will be value in $templateCache service
- This will reduce HTTP requests
- For each HTML request by angular, first it will check $templateCache service, If not found then it will make HTTP request for that HTML file
- standAlone attribute in options means to make a new angular module for templates
- gulp-angular-templatecache will create a file and using .run() service of main module, this will load all html in $templateCache service
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-angular-templatecache gulp-minify-html
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var options = {
module: 'ModuleName',
standAlone: false,
root: 'scripts/app/'
}
gulp.task('templatecache', function () {
return gulp
.src('**/*.html')
.pipe($.minifyHtml({ empty: true }))
.pipe($.angularTemplatecache(
'templates.js',
options
))
.pipe(gulp.dest('./.tmp/'));
});
</code>
Execute:
<code> gulp templatecache
</code>
-
Combing all JS and CSS into respective one file
- Use gulp-useref in order to concatenate all css into one css file and all js files into one js file
- Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
- Similar to gulp-inject
- Index.html should have bower/inject/build section, bower and inject area should be populated first using wiredep and gulp-inject task, then execute this task to concatenate all css and js file into respective single file as mentioned under build tag of index.html
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-useref@v1.1.0
</code>
Syntax in HTML File for gulp-useref:
<code> <!-- build:css content/lib.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css content/site.css -->
<!-- inject:css -->
<!-- inject -->
<!-- endbuild -->
<!-- build:js js/lib.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- endbuild -->
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var assets = $.useref.assets({ searchPath: './' });
gulp.task('combine', function () {
return gulp
.src('./build/index.html')
.pipe(assets)
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp combine
</code>
- $.useref.assets() collects assets from the HTML comment
- $.useref.restore() restore the files to the index.html
- $.useref() will concatenate files
-
Minifying Files
- Use gulp-Uglify to remove whitespace, comments, minify javascript files
- Use gulp-CSSO to remove whitespace, comments, transform css files
- Use gulp-filter to seperate out/reduce/filter files from gulp stream
- Manglin your code can break angular dependency injection, in order to avoid this use Strict Dependency Injection (ng-strict-di) or $inject Property Annotation
- Filter.restore() function put filter back into stream
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-filter@v2.0.0 gulp-csso gulp-uglify
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var assets = $.useref.assets({ searchPath: './' });
var cssFilter = $.filter('**/*.css');
var jsFilter = $.filter('**/*.js');
gulp.task('minify', function () {
return gulp
.src('./build/index.html')
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp minify
</code>
-
Angular Dependency Injection
- Use gulp-ng-annotate in order to provide automatic security blanket because manglin your code can break angular dependency injection
- gulp-ng-annotate looks for dependency injection and adds angular injection
- Use ** /* @ngInject / * annotation on top of controller, services, anonymous function etc to resolve dependency injection if forget to use Strict Dependency Injection (ng-strict-di) or $inject Property Annotation.
- @ngInject provide code hint for gulp-ng-annotate to add angular injections
- Avoid implementing @ngInject for third party libraries
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-ng-annotate
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var assets = $.useref.assets({ searchPath: './' });
var cssFilter = $.filter('**/*.css');
var jsLibFilter = $.filter('**/' + config.optimized.lib);
var jsAppFilter = $.filter('**/' + config.optimized.app);
gulp.task('di', function () {
return gulp
.src('./build/index.html')
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(jsLibFilter)
.pipe($.uglify())
.pipe(jsLibFilter.restore())
.pipe(jsAppFilter)
.pipe($.ngAnnotate())
.pipe($.uglify())
.pipe(jsAppFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp di
</code>
-
Revisions
- Use gulp-rev in order to implement static asset revisioning by appending content hash to filenames: unicorn.css => unicorn-d41d8cd98f.css
- Use gulp-rev-replace in order to rewrite occurences of filenames which have been renamed by gulp-rev in index.html(html referencing file)
- gulp-rev-replace solves the cache problem too
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins
</code>
Install:
<code> npm install --save-dev gulp-rev gulp-rev-replace
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('revision', function () {
return gulp
.src('src/*.js')
.pipe($.rev())
.pipe(gulp.dest('./build/'));
});
</code>
Execute:
<code> gulp revision
</code>
-
File Version
- Use gulp-bump for vesrioning in package.json and bower.json
- --type=pre will bump the prerelease version ..*-x
- --type=patch or no flag will bump the patch version ..x
- --type=minor will bump the minor version .x.
- --type=major will bump the major version x..
- --version=1.2.3 will bump to a specific version and ignore other flags
- for --version=1.2.3 means 1 corresponds to major, 3 corresponds to minor and 3 corresponds to package version
Pre Install:
<code> npm install --save-dev gulp gulp-load-plugins yargs
</code>
Install:
<code> npm install --save-dev gulp-bump
</code>
Code:
<code> var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ lazy: true });
var args = require('yargs').argv;
gulp.task('version', function () {
var type = args.type;
var version = args.version;
var options = {};
if (version) {
options.version = version;
} else {
options.type = type;
}
return gulp
.src([ './package.json', './bower.json' ])
.pipe($.bump(options))
.pipe(gulp.dest('./'));
});
</code>
Execute:
<code> gulp version --version=2.0.0
gulp version --type=minor
</code>
-
Unit Testing with Jasmine and Karma
- karma is Test Runner for JavaScript, a tool that allows you to execute JS code in multiple real browsers
- karma is A Karma plugin. used to generate code coverage.
- Task singleRun refers to execute tests once, it can fail a build but perfect for continuous integration
- Task alwaysRun refers to execute tests and stay alive, monitors changes in file and re-run with each change
- Please make sure karma.config.js file is included in your project before executing gulp task
- __dirname is global object of NodeJS for the name of the directory that the currently executing script resides in
Pre Install:
<code> npm install --save-dev gulp
</code>
Install:
<code> npm install --save-dev karma phantomjs karma-coverage karma-growl-reporter karma-phantomjs-launcher karma-firefox-launcher karma-ie-launcher karma-chrome-launcher karma-jasmine jasmine
</code>
Code:
<code> var gulp = require('gulp');
gulp.task('singleRun', function (done) {
startTests(true, done);
});
gulp.task('alwaysRun', function (done) {
startTests(false, done);
});
function startTests(singleRun, done) {
var karma = require('karma').server;
var excludeFiles = [];
var serverSpecs = 'tests/**/*.spec.js'
karma.start({
configFile: __dirname + '/karma.config.js',
exclude: excludeFiles,
singleRun: !!singleRun
}, karmaCompleted);
function karmaCompleted(karmaResult) {
if (karmaResult === 1) {
done('karma: tests failed with code ' + karmaResult);
} else {
done();
}
}
}
</code>
Execute:
<code> gulp singleRun
gulp alwaysRun
</code>
-
E2E Testing with Protractor
- Protractor is an end-to-end test framework for AngularJS applications
- It execute tests against your application running in a real browser, interacting with it as a real life user.
-
Make sure you have updated version of webdriver-manager otherwise execute below command in cmd before executing gulp task
<code>webdriver-manager update --standalone
</code>
-
In protractor.config.js file mention file path to the selenium server jar, path of chrome driver and comment out address of a running selenium server before executing gulp task
<code>seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.48.2.jar',
chromeDriver: './node_modules/protractor/selenium/chromedriver.exe',
</code>
-
Start webdriver-manager in seperate console before executing gulp task
<code>webdriver-manager start
</code>
-
__dirname is global object of NodeJS for the name of the directory that the currently executing script resides in
Pre Install:
<code> npm install --save-dev gulp
</code>
Install:
<code> npm install --save-dev gulp-protractor protractor
</code>
Code:
<code> var gulp = require('gulp');
var protractor = require("gulp-protractor").protractor;
gulp.task('e2e', function (done) {
gulp.src(__dirname + './protractor_test/')
.pipe(protractor({
configFile: './protractor.config.js',
args: ['--baseUrl', 'http://127.0.0.1:8000']
}))
.on('error', function (e) { throw e })
});
</code>
Execute:
<code> gulp e2e
</code>
-
Setting up test runner on HTML
- Use gulp-jasmine-browser in order to execute jasmine tests in a browser using gulp.
- In order to check output, type following url in browser window: http://localhost:8888/
Pre Install:
<code> npm install --save-dev
</code>
Install:
<code> npm install --save-dev gulp-jasmine-browser
</code>
Code:
<code> var gulp = require('gulp');
var jasmineBrowser = require('gulp-jasmine-browser');
var config.files = ['./scripts/lib/angular/angular.js',
'./scripts/lib/angular/angular-mocks.js',
'./scripts/app/myService.services.js',
'./scripts/app/myService.services-spec.js',];
gulp.task('jasmineBrowser', function () {
return gulp.src(config.files)
.pipe(jasmineBrowser.specRunner())
.pipe(jasmineBrowser.server({ port: 8888 }));
});
</code>
Execute:
<code> gulp jasmineBrowser
</code>
For the complete source code, please see https://github.com/m-hassan-tariq/GulpJSForAngularJS
https://hassantariqblog.wordpress.com/2015/12/09/introduction-to-gulp-js/
https://hassantariqblog.wordpress.com/2015/12/10/style-guidelines-for-gulpjs/
https://hassantariqblog.wordpress.com/2015/12/11/automation-features-of-gulpjs/
Images created by john papa
History
Keep a running update of any changes or improvements you've made here.
