NPM and Gulp

NPM is Node Package Manager and similar to Nuget. Uses package.json​ instead of package.config. Allows installation of Javascript based packages from the NPM website (npmjs.org).

INSTALLING NODEJS and NPM:

1. Install Nodejs (x86 or x64 from the NodeJs.Org)

— THIS makes your machine nodejs and npm enabled..

CHECK: Open command line and run node -v and npm -v. We should see a version number.

Gulp: Gulp is a js based task runner to manage and publish your Web Resources/assets such as Javascript js files, CSS files, Image files.

Read more: Common tasks such as minifying, linting, sass -> css compilation, image optimisation etc. are all done by gulp as part of the tasks defined in gulpfile.js. See Quenchjs.com to generate a bog standard gulpfile.js and get started quickly.

INSTALLING GULP:

1. Install Python from Python website (e.g. to C:\Python34\

1.1 Add Python foldername to PATH env. var in System Properties: C:\Python34. This makes sure npm can find python when needed.

2. Open command prompt as Admin.

3. Run npm install -g gulp (to install gulp globally)

4. Check: run gulp -v (will show gulp version installed)

Contd.. Install gulp to Web Resources project: 

1. Chg Dir cd to the project folder. e.g. C:\Projects\MyProject.WebResources\

2. Run npm install –save-dev gulp (or simply npm install gulp)

3. Now gulp is setup.

4. Install required plugins:

npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename –save-dev

Now each of the defined gulp tasks can be run to do what we originally wanted – minifying, linting etc.

If we have a default task:

Running gulp​ in that project folder will run all tasks – lint, sass, scripts watch..

To run only one task of all defined ones in gulpfile.js we can run

​gulp sass

See excellent post on further Gulp setup by Travis Maynard.

https://travismaynard.com/writing/getting-started-with-gulp

MISC Package updates:

npm install -g node-gyp

npm install gulp-cssnano

npm install lodash

Issues:

If the default setup doesnt work. Follow steps below.

Ensure exists Environment variable: NODE_PATH=C:\NPM\npm\node_modules

ISSUE: Cannot find gulp:

Ensure PATH environment variable has C:\NPM\npm at the end. This is where gulp.cmd lives. If we setup the prefix to C:\NPM, we will find gulp.cmd under C:\NPM\npm\gulp.cmd