Sitecore Build Scripts with Gulp4

General

We are using these tools, technologies and modules:

• NodeJS 14.16.0
  • Can use NVM to install nodejs. See more informations below.
• Gulp 4.0.2
• NPM 6.4.11

This project was tested with :

• Sitecore 8.2 U7 and Sitecore 9.0.1
• .Net Framework 4.5.2
  • Make sure you have correctly installed the necessary package within the IIS installation.
• Visual Studio 2019
  • Comes with msbuild 16.0

Getting Started

The build scripts are using nodejs, npm and gulp. For nodejs usage, I highly recommend using nvm (node version manager) as it is easier to handle node js updates.

When working with Sitecore, you might want to make sure you have these installed :

• IIS
• Chocolatey
  • You can then use choco to install any package :
    • choco i vscode
• MsDeploy
  • Use IIS Web Platform installer to install and to confirm it is installed
• NVM
• Nodejs
  • Use NVM to install the LTS.
  • When install, you can easily install any nodejs version :
    • nvm i nodeJsVersion
  • You can then see all of your nodejs version ;
    • nvm list
  • Pick the nodejs version you want to use :
    • nvm use yourNodeJsVersion

Gulp will be installed by running npm i

Overview of the build architecture

Gulp

• Gulp is being used to define Tasks.
  • You can see them there : ./gulp/tasks
• There is a configuration file where we definie variables such as path, artifacts and solution name.
  • You can see it here : ./gulp/config/config.json
  • This is also where you want to update all the values to adapt the script to your solution

Node.js

• It is a JS event-driven server.
  • We use it in parallel to import, export and define task.
  • It is omnipresent in almost all gulp tasks.

NPM

• It is the node package manager.
  • We use it to manage node js packages
    • You can see the packages that are being installed here : ./package.json
    • to install an npm package and save it for dev depedencies, run this : npm i --save-dev yourPackage

How to build the solution

There are many build scripts available, they are define within the ./package.json file.

Every script have and should have a script definition (prefixed by ?), It is used to show definition when running npm run info

Run this script to show it all : npm run info Run this script to build the whole solution : npm run build Run this script to build the backend : npm run build:backend

• Behind the scene, it uses msbuild to build backend solution.
  • Find it here : ./gulp/tasks/_utils/publishStream
  • Here is a list of the available msbuild switches
  • Here is the msbuild plugin being used
    Run this script to build the frontent : npm run build:frontend
  • Most of the frondend task are about compression and copying.