I’ve had several colleagues tell me about Gulp recently. Gulp is an automated task runner. You can set it up to automate build tasks. They tell me it can do “anything.” But for me that wasn’t such a helpful description. Where do you start when this tool can do “anything?” Here, I have a practical example of using Gulp to save time while developing in Sitecore.
Before Gulp, I would make a change in one or more CSS, JS, or cshtml files, save, build, publish, and then refresh my browser window. There is a large wait time while Sitecore rebuilds all of its caches before the page loads and you can see your changes. I always find this to be the worse when I forget a semicolon and have to do the process again for one character. Think about how many times you do this per day and how much time you are waiting. You can move the CSS, JS and cshtml files from your project root to the web root manually to avoid rebuilding the caches. But that could take just as long by the time you flip between windows and actually copy the file or files.
Enter Gulp. Gulp can be setup to watch for changes to files and move them from your project root to your web root automatically! Now the process becomes save, refresh and you can see your changes immediately. How do you make it work?
Step 1:
Go to www.nodejs.org. Download and install the recommended version.
Step 2:
Open a command prompt and use NPM (nodejs package manager) to install Gulp globally.
npm install –g gulp
Step 3:
If you are running a version of Visual Studio prior to 2015, install the
Task Runner Explorer extension from https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708.
Step 4:
Open a project in Visual Studio. Create a file named “gulpfile.js” in the project root. It will be on the same level as your references and Web.config.
Step 5:
Edit the gulpfile and setup the files you want to watch for changes and where you want to copy them to when changes occur. You can create as many watches and task callbacks as you need. One thing to note, whenever a file in your watched path changes, ALL files in that path get copied to the destination. If you have a large number of files in a path, that could still take a noticeable amount of time. But for a small number of files (10 – 40), the copy takes place in milliseconds.
/// <binding ProjectOpened='watch' />
//create an instance of gulp
var gulp = require('gulp');
//setup a task to watch files for changes
gulp.task('watch', function() {
//setup individual path and file type watchers and name the task callback function
gulp.watch(["Views/ *.cshtml"], ['deploy-views]);
gulp.watch(["Content/css/*.css"], ['deploy-css']);
gulp.watch(["Content/js/*.js"], ['deploy-js']);
});
//setup task callback functions
gulp.task('deploy-views', function () {
return gulp.src(['Views/*.cshtml'])
.pipe(gulp.dest('C:\\inetpub\\wwwroot\\somepath\\Website\\Views'));
});
gulp.task('deploy-css', function () {
return gulp.src(['Content/css/*.css'])
.pipe(gulp.dest('C:\\inetpub\\wwwroot\\somepath\\Website\\Content\\css'));
});
gulp.task('deploy-js', function () {
return gulp.src(['Content/js/*.js'])
.pipe(gulp.dest('C:\\inetpub\\wwwroot\\somepath\\Website\\Content\\js'));
});
Step 6:
Open the task runner explorer window and select the correct project from the dropdown. Click the refresh icon to reload the gulpfile and list the tasks. Right click on the watch task and bind it to “project open”. This will start the watch task every time your project is opened. If it doesn’t automatically start for some reason, you can right click on the watch task start it manually.
Step 7:
Figure out what to do with all the time you save!
Note:
- You can install nodejs, npm and Gulp from within Visual Studio. It worked fine for me for one project. When I tried to install it for the second project it broke in both places.
- When you make changes to .cs files or add new files to your project, you will still need to build and publish.
