npm Tutorial For Non Node.js Developers

This tutorial is for developers who don’t have any familiarity with Node.js but still want to use applications like Grunt, Gulp etc. While installing and working with these applications you often come through package.json file and npm command, so understanding what exactly is npm will help you to tackle your difficulties while working with these kind of apps.

npm Package

In nutshell, a npm package is a directory that contains a collection of one or more modules and a package.json file representing a library.

Node Package Manager

npm(node package manager) is a combination of a command line tool and cloud that makes it easy for Node.js developers to share, update and reuse packages.

npm is automatically installed while installing node.js and is used to download or publish packages from or to npm cloud servers respectively.

package.json File

package.json file defines name, version, dependencies(a package depending on other package as its library) etc of a package. Any directory having this file is treated as a npm package even if you don’t want to publish it to npm cloud.

Downloading Packages:
You can directly pass the package name to npm command and it will download the package into the current working directory. For example:

Publishing a Package:
To publish a package to npm cloud servers you need to pack the JavaScript files in a directory along with package.json file in it. For example:

Here our application canvas-project depends on canvas-chart package for running. Package is published using npm publish command.

Importing a Package:
To use a package inside a node.js program we can simply pass the package name to require function to import main module of the package. For example:

Here we are importing the express package.

Using Package as a Executable

npm makes it possible to write executables using JavaScript.

When npm downloads a package it looks for bin property in the package.json file of that package. If it finds that property then it converts the package into a executable(packs Node.js binary and package files into a binary executable file) file and places the executable in a mentioned location.

So we say that a npm package represents a library and/or an executable.

For example, the below command downloads grunt-cli into current directory and also creates an executable and places it in command directory so that it can be used as a shell command.

Now we saw what packages are and how they depend on other packages. We also saw how npm manages everything about packages. Let’s understand all the above concepts hands on by installing Grunt.

Installing Grunt using npm

Grunt is a task runner i.e., it offloads many tasks from web developers. Every web project required minification, image compression, syntax error debugging etc. Grunt handles all these hectic and common tasks automatically on behalf of a web developer.

Here are the steps to install and start working with Grunt.

• Create a directory for your web project. On server level it would be web server root directory.
• In your shell navigate to the web project directory.
• Now download and installing Grunt npm package.
  npm install -g grunt-cli

  We saw how the above code creates grunt command. -g indicates that the package will not be put in the current directory rather in a global directory in your system. If you want you can remove the -g flag.

• All the tasks that grunt performs are divided into different packages. For example, there are different packages for minifying JavaScript, contacting JS files, checking errors etc. You can also creates packages for your own tasks for grunt called as grunt plugins. Let’s install the packages representing the tasks into our web project directory. For that we first need to create a package.json file inside the web project directory. Put this content in the file.
  {
    "devDependencies": {
      "grunt-contrib-concat": "~0.3.0"
    }
  }

  And then run npm install inside the web project directory which will download the package. Remember I told you, any directory containing package.json is considered as a npm package so now your web project is itself a npm package.

• Now you have installed a package for concatenating JS files. Now you need to tell grunt command to use the concat package as a task. Grunt command provides a way to install tasks(or grunt plugins) i.e, using Gruntfile.js. When you run grunt command inside web project directory it looks for Gruntfile.js to load plugins or tasks.

  We need to load the plugins inside Gruntfile.js and then run the grunt command so that grunt actually sees the plugins.

  To install grunt-contrib-concat plugin put this code inside Gruntfile.js

  module.exports = function(grunt) {
  
      // 1. All configuration goes here
      grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),
  
          concat: {
              // 2. Configuration for concatinating files goes here.
              dist: {
                  src: [
                      'js/libs/*.js', // All JS in the libs folder
                      'js/global.js'  // This specific file
                  ],
                  dest: 'js/build/production.js',
              }
          }
  
      });
  
      // 3. Where we tell Grunt we plan to use this plug-in.
      grunt.loadNpmTasks('grunt-contrib-concat');
  
      // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
      grunt.registerTask('default', ['concat']);
  
  };
• Similarly you can download more grunt plugins and load them into grunt.
• Now anytime you can run grunt command inside web project directory for contacting JS files.

Downloading large number of packages

If you want to download a large number of packages then it’s a cumbersome task to run the npm command again and again for every single package. Therefore you can place the package.json file in the project directory with dependencies listed for your application in it. Then run npm install command to install all the dependencies together.

So technically you are making your application project a npm package even if it’s not a library and you may not want to publish it. I know it’s ugly but it works that way.

Conclusion

In this tutorial I tried to explain basics npm for beginners. Thanks for reading. If it was helpful please share it.