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:

// Default Task
gulp.task(‘default’, [‘lint’, ‘sass’, ‘scripts’, ‘watch’]);

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

Misc NPM commands:
npm init
npm link

Issues:

If the default setup doesnt work. Follow steps below.

ISSUE: NPM permission problems
npm config set prefix %APPDATA%\npm
npm config set cache %APPDATA%\npm-cache
OR
npm config set prefix C:\NPM\npm
npm config set cache C:\NPM\npm-cache
ISSUE: ECONRESET errors behind proxy or VPN
npm config set registry http://registry.npmjs.org

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

One thought on “NPM and Gulp

  1. Admin

    Comparison of 3 main package managers:
    https://jessedotnet.com/2016/01/07/nuget-vs-npm-vs-bower/
    Nuget = manage .NET assemblies and server side packages
    npm = manage js framework libraries for dev (mostly all are hosted at npm repository). Manages dependency tree. e.g. npm install jquery …
    Bower = mainly for managing front end js css for smaller page footprint. Uses a flat dependency tree.

Leave a Reply

Your email address will not be published. Required fields are marked *