Open UI: Grunt with Livereload

With Siebel Open UI development we naturally spend the majority of our time working on the browser. Part of that requires clearing the browser cache, and hitting F5 to reload the browser.

Sometimes we reload the browser, and think afterwards, did I really clear the cache that time? Maybe not... so we the clear cache, and reload the browser again. Seconds later, we spot a typo in our code and the endless cycle continues. Wouldn't it be good if we can focus on writing the code, and let something else clear the cache and reload the browser? 

This is where tools like Grunt can help.

1. Download No Cache

"No Cache" is a Chrome extension that I wrote to automatically clear your browsers cache. It is available for free on the chrome store. There are 1 click solutions out there, but I prefer to have an automatic background process take care of this.

https://chrome.google.com/webstore/detail/no-cache/ogbfmfambmmhfdpfokohebghmcdbodbh?hl=en

1. Right click on the No Cache icon, and choose "Options"
2. On the "Cache" tab select "Enable for filtered requests"
3. On the "Filters" tab select the input box, type in "start.swe" and click the + icon

This tells No Cache to clear the cache for every request Siebel makes, this should work on the local or thin client. If you use another browser and have your own favorite clear cache plug in, then that will work as well.

2. Install Grunt

Grunt is a JavaScript task runner that we can configure to reload our browser, but first we need to download and install Node.js from this website

http://nodejs.org/download/

Its not necessary to know what Node.js does, just know that it provides us with the environment to run Grunt. Once you've installed Node.js open a command prompt and type the following line to install the grunt command line globally.

npm install -g grunt-cli

Next we need to decide where to put our Grunt configuration. I like to put it under the Siebel/Client folder because I backup the PUBLIC folder, and don't want copies of Grunt and its modules copied along with this backup.

Open a command prompt, cd to your Client folder, and follow the next set of instructions to install and configure grunt on your local machine.

mkdir grunt

cd grunt

Create a new file in the same folder called package.json, with the following contents

{
  "name": "SiebelGrunt",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

back at the command prompt, type the following command to download the required dependencies defined in the file above

npm install

Next create a new file called Gruntfile.js, with the following contents

module.exports = function(grunt) {
     var sJSPath = '../PUBLIC/enu/*/SCRIPTS/**/*.js';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
          watch: {
               scripts: {
                    files: [sJSPath],
                    options: {
                         livereload: true
                    },
               }
          }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.registerTask('default', ['watch']);
};

This file is important, so lets run through it line by line

>     var sJSPath = '../PUBLIC/enu/*/SCRIPTS/siebel/custom/**/*.js';

This path specifies the folder and file pattern that Grunt will watch for changes. Essentially we want to watch for any changes to JS files in the Siebel script folders

> watch: {

This line defines a "watch" task, there are other tasks that can be run. Eg code lint/minification/, but I've kept it simple for this example.

> files: [sJSPath],

configure the files to watch using the path statement above

> livereload: true

This option will spawn a background process that will cause your browser it refresh automatically. To Integrate our browser with this background process, there are 3 options as described here

http://feedback.livereload.com/knowledgebase/articles/87979-how-do-i-choose-the-best-integration-method-

The browser extension is the most suitable method for development, so go ahead and download it with these instructions.

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

To start it all up, go back to the command prompt and simply type

grunt

To test it out, goto SCRIPTS, open up any JS file like "postload.js", modify it as below, and watch your browser reload magically.

I've presented the bare minimum required to get up and running with Grunt, but once you have that setup, you no doubt want to look into what other things Grunt can do for you.

A good place to start is..

http://gruntjs.com/

Or another tutorial like this one

http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/

SHARE