How to Install Grunt on Ubuntu 16.04

February 6, 2017 | By in PROGRAMMING
| Reply More

Grunt is a JavaScript task runner, that does things which you normally do with your code. One of the best examples is that, when you're about to release a website, to make your site faster, you try to use a CSS Minifier which will minify all your CSS files and make it smaller or shorter. Normally we need to copy all the CSS files codes to a Minifier website and add these modified codes to your domain files. But with Grunt, you can do it using its plugins. When you run Grunt, it's going to run all of your plugins that you have set and it's going to automatically do whatever you want to do with these plugins. One of the coolest plugins which Grunt owns is the CSS Minifier. You can minify your CSS files or even javascript files, compile Sass, run JSHint etc using Grunt plugins automatically.

In this tutorial, I'll explain on how to setup Grunt on our Ubuntu 16.04 server. Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. First of all, to start with we need to install the NPM/NodeJS.

Installing  NPM/NodeJS

Firstly, we need to add and enable an Ubuntu repository to support the NPM/NodeJS installation and then go for the below commands to install them.

$apt-get install python-software-properties

$curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

## Populating apt-get cache...

+ apt-get update
Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB]
Hit:2 http://nyc2.mirrors.digitalocean.com/ubuntu xenial InRelease
Get:3 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB]
Get:4 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB]
Fetched 306 kB in 1s (274 kB/s)
Reading package lists... Done

## Confirming "xenial" is supported...

+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_6.x/dists/xenial/Release'

## Adding the NodeSource signing key to your keyring...

+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK

## Creating apt sources list file for the NodeSource Node.js v6.x repo...

+ echo 'deb https://deb.nodesource.com/node_6.x xenial main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_6.x xenial main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
Hit:1 http://mirrors.digitalocean.com/ubuntu xenial InRelease
Get:2 http://mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB]
Get:3 http://mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB]
Get:4 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB]
Get:5 https://deb.nodesource.com/node_6.x xenial InRelease [3,914 B]
Get:6 https://deb.nodesource.com/node_6.x xenial/main Sources [764 B]
Get:7 https://deb.nodesource.com/node_6.x xenial/main amd64 Packages [962 B]
Fetched 312 kB in 0s (635 kB/s)
Reading package lists... Done

## Run `apt-get install nodejs` (as root) to install Node.js v6.x and npm

By running the above command, you can see what all procedures take place. It adds a new repo and updates the packages. Now we need to just run the installation command to get it done as stated.

$apt-get install nodejs

Let's confirm the installations done.

$ node --version
v6.9.4
$npm --version
3.10.10

Installing Grunt and Grunt-CLI

Before installing Grunt, we need to make sure that our npm package is up-to-date. You can ensure that by running this command:

$npm update -g npm

After updating our npm package you can run these commands to install Grunt and Grunt-CLI

$npm install -g grunt
$npm install -g grunt-cli

You can just confirm the installation by running this command below:

$grunt --version
grunt-cli v1.2.0

A Grunt-CLI does not install the Grunt task runner. What Grunt CLI actually does is that, it run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously for different projects.

How the CLI works

Each time when grunt runs, it looks for a locally installed Grunt using node's require() system. This makes easier for grunt to run from any subfolder in your project. You can go through its code to understand better.

If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from your Gruntfile, and executes any tasks you've requested for it to run.

Components of a Simple Grunt project

The two important files which determine your project setup is the package.json and Gruntfile.js.

package.json: This file is used by npm to store metadata for projects published as npm modules. You can list Grunt and the Grunt plugins/modules and its dev Dependencies in this file for your project.

Gruntfile: This file is named Gruntfile.js and is used to configure or define tasks and load Grunt plugins.

I created a folder called "~/MyGrunt_project" in which I'm going to setup my grunt project. Firstly, I need to create my package.json file inside my project directory. In order to create my package.json file, I just run the command npm init from my root directory. The npm init command will create a basic package.json file.

:~/MyGrunt_project# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (MyGrunt_project) myproject
version: (1.0.0)
description: Testing
entry point: (index.js)
test command:
git repository:
keywords: test
author: Linoxideadmin
license: (ISC)
About to write to /root/MyGrunt_project/package.json:

{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "Linoxideadmin",
"license": "ISC"
}
Is this ok? (yes) yes

 

Next, we need to install Grunt and its modules to our project directory. You can do it by just running this command below:

$npm install grunt --save-dev

What this  "--save-dev" does that, it saves grunt modules and our dependencies in your package.json file.

It modified our package.json file as below:

~/MyGrunt_project# cat package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "Linoxideadmin",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1"
}
}

Now we've grunt installed inside our project. We'll have a folder named node_modules with all those required Grunt modules.

$~/MyGrunt_project# ll
total 16
drwxr-xr-x 3 root root 4096 Jan 29 07:26 ./
drwx------ 6 root root 4096 Jan 29 07:03 ../
drwxr-xr-x 91 root root 4096 Jan 29 07:26 node_modules/
-rw-r--r-- 1 root root 307 Jan 29 07:26 package.json

Creating your Gruntfile

Next, we need to create your Gruntfile. Gruntfile is where you register and load all of your module and plugins. It's a valid javascript file.  And it's from where you can run all of your plugins loaded by just typing the command grunt on your command line inside your project.

A Gruntfile is comprised of the following parts:

The "wrapper" function
Project and task configuration
Section for loading Grunt plugins and tasks
Custom tasks

I created my simple gruntfile. Please see it below:

$~# cat MyGrunt_project/gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
};

Installing and using Plugins

Plugins make our life easier by performing our required tasks efficiently in no time. You can get all the available and useful Grunt plugins here. You can select your required plugin from the list and install it as per instructed there. The easiest way to add Grunt and grunt plugins to an existing package.json is with the command npm install <module> --save-dev.

I'm going to install/use contrib-uglify plugin for you today, this helps to minify your javascript files automatically using grunt. You can just install your plugin by running this command in your project directory:

$/MyGrunt_project# npm install grunt-contrib-uglify --save-dev
myproject@1.0.0 /root/MyGrunt_project
└─┬ grunt-contrib-uglify@2.0.0
├── lodash.assign@4.2.0
├─┬ maxmin@1.1.0
│ ├── figures@1.7.0
│ ├─┬ gzip-size@1.0.0
│ │ ├─┬ browserify-zlib@0.1.4
│ │ │ └── pako@0.2.9
│ │ └─┬ concat-stream@1.6.0
│ │ ├─┬ readable-stream@2.2.2
│ │ │ ├── buffer-shims@1.0.0
│ │ │ ├── core-util-is@1.0.2
│ │ │ ├── isarray@1.0.0
│ │ │ ├── process-nextick-args@1.0.7
│ │ │ ├── string_decoder@0.10.31
│ │ │ └── util-deprecate@1.0.2
│ │ └── typedarray@0.0.6
│ └── pretty-bytes@1.0.4
├─┬ uglify-js@2.7.5
│ ├── async@0.2.10
│ ├── source-map@0.5.6
│ ├── uglify-to-browserify@1.0.2
│ └─┬ yargs@3.10.0
│ ├── camelcase@1.2.1
│ ├─┬ cliui@2.1.0
│ │ ├─┬ center-align@0.1.3
│ │ │ ├─┬ align-text@0.1.4
│ │ │ │ ├─┬ kind-of@3.1.0
│ │ │ │ │ └── is-buffer@1.1.4
│ │ │ │ ├── longest@1.0.1
│ │ │ │ └── repeat-string@1.6.1
│ │ │ └── lazy-cache@1.0.4
│ │ ├── right-align@0.1.3
│ │ └── wordwrap@0.0.2
│ └── window-size@0.1.0
└── uri-path@1.0.0

npm WARN myproject@1.0.0 No repository field.

This will install your plugin and add it your package.json file.

As you can see our module get added to our package.json file. Once the plugin has been installed, it can be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-contrib-uglify');
Check out my gruntfile.js appended with this module.
The commented portion describes the four components of our Gruntfile as discussed above.
1) The wrapper function
2) Project or Task configuration
3) Loading the Grunt module or Plugins
4) Custom tasks which defines how many tasks to run.
Now I've downloaded my source javafile to my project directory which we need to minify.
$ wget http://code.jquery.com/jquery-2.1.1.js
Finally, let's run grunt on our commandline under our project directory to initiate our task of minifying our Javascript file as required.
$/MyGrunt_project# grunt
Running "uglify:build" (uglify) task
>> 1 file created.Done.
You could notice that our task ran successfully and created a minified file as described in our gruntfile.
$MyGrunt_project# ls -l jquery*
-rw-r--r-- 1 root root 247351 Oct 24 2014 jquery-2.1.1.js
-rw-r--r-- 1 root root 84034 Jan 29 09:06 jquery-2.1.1.min.js
There we go, you have your minified javascript file jquery-2.1.1.min.js created automatically in no time :).

Conclusion

Grunt has made web development more enjoyable and easier. It automates the repetitive tasks. In addition, it has allowed web developers to focus on building features rather than copying, compiling, and configuring. Grunt has a great community with a lot of plugins to automate our web development process. It's important to know that Grunt has lots of options to get a good workflow. I recommend to investigate on more options and, of course, try it and let me know your feedback.

Filed Under : PROGRAMMING, UBUNTU HOWTO

Free Linux Ebook to Download

Leave a Reply

Commenting Policy:
Promotion of your products ? Comment gets deleted.
All comments are subject to moderation.