GULP: A Task Runner Tool

What is GULP?

It is a JavaScript scripting tool that automates repetitive tasks, in other words it is a JavaScript Task Runner. It can automate task such as:

  • Bundling and minifying libraries and stylesheets
  • Refreshing your browser when you save a file
  • Quickly running unit tests
  • Running code analysis
  • Less/Sass to CSS compilation
  • Copying modified files to an output directory
  • Looking for JS syntax errors
  • Compressing and moving updated images or files
  • Publishing all Projects
  • etc…..

GULP can be used with Sitecore/Helix to automate the publishing of all projects, performing any transformations and running Sitecore items syncing process with Unicorn for example. You can write your own tasks or find plug-ins that are useful for your project.

Setting up GULP

GULP is installed using npm which is part of Node.js. So start by installing Node.js.

  • Make sure Node.js is installed on your Windows by typing node -v in cmd. You should see your installed Node.js version number
  • npm comes with Node.js however to make sure you have the latest version run npm install npm -g in cmd
  • Type npm install gulp -g to install GULP globally
  • Type gulp -v to verify it got installed
  • Navigate to your root project folder and check the packages.json file, if it exists skip the next line
  • If packages.json does not exist, go to your folder in cmd cd c:/... and type npm init. This should create the packages.json file
  • Then setup GULP in the packages.json by typing npm install gulp -save-dev to install GULP in this folder
  • At this point you should see a new folder node_modules in your root folder
  • Create a new file named gulpfile.js which will have your tasks

Installing a sample plug-in

Plug-ins are tasks created by third parties that we can install and use. We will install jshint plug-in which verifies javascript syntax:

  • Open cmd to your folder, type npm install gulp-jshint –save-dev. This installs jshint plug-in in your folder only
  • In your gulpfile.js add the following:
// include gulp
var gulp = require('gulp'); 
// include plug-ins
var jshint = require('gulp-jshint');
// JS hint task. This creates a task and specifies the source (src), 
// action (pipe) and destination (dest [if applicable])
gulp.task('jshint', function() {
   gulp.src('./src/scripts/*.js')
   .pipe(jshint())
   .pipe(jshint.reporter('default'));
});
  • Replace ‘./src/scripts/*.js’ with your relative scripts folder path
  • Save the file and go back to cmd and type gulp jshint
  • You should see the task running and then a list of syntax errors (if any)

At this point GULP should be working. Open your project in VS, open the Task Runner bottom tab and click on the refresh bottom in the top left corner to see jshint.

You can run any task one by one or you can run several at a time. You will to create a task which is a set of tasks as the following:

// default gulp task
gulp.task('default', ['gulp-jshint', 'htmlpage', 'scripts', 'styles'], function() {
});

To run these set of tasks, simply type gulp in your cmd or choose the ‘default’ task from VS Task Runner.

In the Task Runner you can bind tasks with build or clean actions by right-clicking a task and selecting a binding.

This was a very brief introduction to GULP. You can find more documentation and examples online.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s