Automatically Pushing IBM Script Portlet Changes with Node and Gulp
SamAlexander 120000PQMY Visits (7000)
When I think of something cool to try, it's dreadfully hard for me to resist trying it right away and instead focus on more important tasks. I'm sure many of you know what I mean. :-) Today I couldn't resist any longer to try out an idea: Hook up Gulp build script to the Script Portlet's "push" utility to automatically push my changes when I save. Before diving in, let me quickly explain what prompted this idea:
Burning the Midnight Oil Preparing for IBM ConnectED Presentation
While the Script Portlet comes with an inline editor much like JSFiddle that lets you bang out HTML/CSS/JS, most developers will prefer working with their own editors and IDE, especially for more complex applications. Catering to that desire, the newest version of the Script Portlet comes with command line support where you can "push" changes from your local development environment. With a sample "sp.sh push" (or sp.bat push if you're on Windows), you can quickly publish changes.
So when I was writing my SPA for the Script Portlet and using sp.sh to push changes to the script portlet, I really wanted to automate it such that when I save a file it would automatically push the changes to the Script Portlet. Today I was able to hook that up, and it was easier than I thought. Here's how:
Requisite Environment and Tools
You need to install and configure a few things:
I think that's it.
Now for the Fun Stuff
My really simple SPA has a single .js file and a single .html file.
For simplicity, I simply saved the Script Portlet's "sp.sh" file in the project directory. Instead, you might want to move it to a common location and add sp.sh to your path.
sp-config.json is the file the Script Portlet uses to determine which script portlet to deploy the code to as well as your Portal credentials. That's all cove
The magic happens in the the gulpfile.js.
My Simplistic gulpfile.js
The first two lines pull in gulp and gulp-shell modules.
Towards the middle, I created a "watch" task that watches my .js and .html files for changes, and when a change is detected, calls another gulp task, "sp_push".
The sp_push task uses the shell.task call (provided by gulp-shell) to shell out to the OS and call the Script Portlet's "sp push" command to push the changes from my local workstation to a Portal server. (The Portal server can be local or remote).
Now, Run It!
Type "gulp watch" in your terminal window. Gulp will now start watching your files.
Make a change to one of your files in your editor and save. Take a gander at the terminal window and you'll see gulp calling sp push to push your changes.
Your changes were just pushed to the Script Portlet.
Simply refresh the browser page to see your changes in the Script Portlet.
Slick. What Else Can You Do?