Node.js / Gulp - SharePoint Development and Build Setup

After the new SharePoint Development model announcement, I started looking into the Node.js , Gulp and Typescript etc. Here we will look into how to install Node.js and Setup the Gulp within the Visual Studio projects.

Referenced :

• The new SharePoint development model - client web parts , Javascript frameworks...
• Collab365 Summit - a-brilliant-discussion-around-the-sharepoint-framework...

Node.js setup:

• Download and Install the new version of the Node.js.

Configure npm:

By default, the npm is configured to use the default registry registry.npmjs.org. There are some alternatives available and we can use own private registry as well and more details about the registry can be found here.

• Check the npm config: "npm config ls -l" displays the npm config.

• Configure the proxy : This needs to be configured, if we use the corporate proxy. 

npm config set proxy http://username:password@proxy:port 

npm config set https-proxy http://username:passwordproxy:port 
npm set strict-ssl false

The above sets the proxy and not use the ssl for downloading the modules. "username" and "password" are optional. All the custom configs are stored in the .npmrc file. If the default registry is blocked by the proxy, use the custom or mirror registry as below.

npm config set registry <registry url>

Install the npm modules:

Once we set the npm ready, we need to install the required modules to be used within the project. The npm modules can be either installed locally or globally so that it can used across multiple projects.

npm install gulp -g
npm install gulp-uglify -g
npm install gulp-save -g
npm install del -g
npm install gulp-concat -g
npm install gulp-clean-css -g

The above installs the module globally as shown below.
Visual studio Extensions:

There are various task runners extension available for Visual Studio to test and manage the custom task execution. For the below example, I have downloaded the NPM Scripts TaskRunner.

SharePoint Project setup for Package and Gulp:

• Create the SharePoint project.
• Add the package file (package.json) and configure all the dependency modules to be used within the project.

• Create a new Gulp file.

• Modify the package.json to include all the required modules. This installs all the modules locally as mentioned in the screenshot. (Note: use the above mentioned steps to configure the npm, if it fails to install the modules due to proxy/credential issues)

• Configure / Include the script in the Gulp file to carry out the specified tasks and set the binding that the default task is executed before build. (ex: print hello before build)

• So the Gulp tasks gets executed when the project is compiled as shown below.

• The gulp file can be extended to do the pre build tasks like minifying js and css etc as mentioned in the Vardhaman's blog.

if we are going to use the build server to build the package, the node module can be installed locally using the running "node install" command in the folder containing the package.json. This installs the node module locally to the projects. Noticed that the node_module creates the hierarchical path installing all the dependent modules ending up with more than 260 characters. This will cause an issue, when we use the automated build and deployment using the build server while we copy or deleting the folders. So use the "Robocopy" to copy and "rimraf" node module to delete the folders which can be plugged into the build process using the powershell / msbuild.

by Balamurugan Kailasam via Everyone's Blog Posts - SharePoint Community