Entering the World of Gulp and NPM

So I recently installed Habitat on my local machine because I was taking an all day course on it at Sitecore Symposium. I still remember being challenged by these weird strange new terms such as Gulp and NPM/Node and a few other terms I read about as I was researching those terms such as Bower and Grunt. I never really fully appreciated what they were until recently. The time savings that a node package like Gulp would save me and the team I work with is now fully being appreciated.

So what exactly is Gulp?

That’s the exact question I was asking myself, and why would I, as a pure Microsoft stack developer have any interest in using it in my own project? Well it’s a build/task running tool, but built with node instead of built specifically for the Microsoft ecosystem. So why would you want to use Gulp instead of Powershell and MSBuild. Well there’s a few reasons, first off, for those that aren’t experts at using MSBuild, there is definitely a learning curve involved with using MSBuild. Though there would still be some development needed with MSBuild to work with Gulp to interact with your solution. The second reason, is that Gulp has a larger community either inside of the Microsoft stack or outside. The dependencies you can use with Gulp, are already built, and some of them can greatly reduce development time. So yes technically anything you can achieve with Gulp, could be done with MSBuild and Power Shell, but you’ll get there a lot quicker using existing modules for Gulp or even extending/writing your own, in a lot less time than if you were to do the same in MSBuild and Power Shell.

What are some things you can achieve with Gulp:

• Watching Files to Automatically deploy changes, and even update your browser with the latest changes
• Compile Less, Sass, TypeScript and more
• Handle Sitecore Transformations on the Fly by build configuration on your local machine
• Compress and optimize images as they’re added
• Handle moving projects assets around
  • Would be important for license files and moving dll’s for your sitecore projects to the correct folders

So it’s a no brainer why Sitecore Habitat includes Gulp, because with Habitat which is based on the Helix Sitecore Architecture, where there could potentially be hundreds of projects, it makes sense, that you can use Gulp to run one set of tasks that will publish and build all projects at once.

So what is NPM?

NPM just stands for Node Package Manager. So it’s very similar to Nuget for those like me that are used to the Microsoft ecosystem. But it’s specifically intended for managing node packages, which Gulp is a Node package. So what exactly is node? Well node is a Javascript code base that’s intended to run on the server. So the ecosystem for Package managers is starting to grow. There is a Node package manager (NPM), a client side package manager (Bower), and still Nuget which is great for managing .net code packages. So why use NPM then? Well it’s specifically designed to handle Node packages, so that’s the best case for why you should use it, if you are using a Node package in your solution such as Gulp. You could still use Nuget, but it’s not as well equipped to handle node packages as NPM is.

If you want to start using Node in your project, you need to start by downloading Node and installing on your machine, you can download it at https://nodejs.org/en/download/. Once you download it, go ahead and install the executable. Once you have it on your machine, now you can start to use NPM for your Visual Studio Solution. If you plan to use Gulp, you will want to define a gulpfile.js which is the default name for the gulp task file. Generally when I’m working with NPM and Gulp in a project I like to create a solution folder where I will store the package.json (for NPM) and gulpfile.js as well as anything else needed for Configuration of the solution.

Solution Configuration Folder Setup

You can define dependencies you need for your gulpfile or for other uses, by configuring the package.json file. When you run the command:

npm install

In the command prompt, it’ll look at your package.json contents to determine what dependencies it should pull. When you edit your package.json file, it has intellisense, so it’ll help you build your file. It’s even smart enough to know the version options for the dependencies you will pull in. An example package.json file is below.

{
  "name": "PackageName",
  "version": "1.0.0",
  "description": "Some description here",
  "main": "gulpfile.js",
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-debug": "^2.1.2",
    "gulp-msbuild": "0.2.13",
    "run-sequence": "^1.1.4",
    "gulp-util": "^3.0.7",
    "merge-stream": "^1.0.0",
    "gulp-nuget-restore": "^0.4.0",
    "gulp-clean": "^0.3.2"
  },
  "repository": {
    "type": "git"
  },
  "private":  true
}

That’s really it. In future articles, I will demonstrate some of the features you can add to your gulp file to watch files and automatically push them to your folders and some specific gulp configurations for Sitecore with and without helix pattern.