You're reading from Learning Grunt Monitor and automate complex JavaScript tasks and processes by obtaining a practical understanding of Grunt

Product type Paperback

Published in Mar 2016

Publisher Packt

ISBN-13 9781785888809

Length 184 pages

Edition 1st Edition

Languages

JavaScript

Tools

Grunt

Concepts

Web Utilities

Author (1):

Douglas Reynolds

View More author details

Table of Contents (9) Chapters

Preface

1. Grunt Dependencies

2. Foundation for Creating an App using Angular.JS FREE CHAPTER

3. All about Grunt Plugins

4. Configuration of Grunt Tasks

5. Task Setup in the sample_project Application

6. Building the Sample Project

7. Advanced Grunt Concepts

Index

Dependencies

Before jumping into Grunt.js, you first need to understand that Grunt has some dependencies that are needed in order to get up and running with task automation. In this case, the dependencies are Node.js and Node Package Manager (NPM). While a deep level of Node.js knowledge is not a prerequisite to using Grunt.js, a high-level understanding of Node.js and NPM is needed to get started.

Node.js and NPM are required for the installation of the Grunt command line interface (CLI) as well as plugins that are used for task automation in Grunt. We will get into plugins later in the book, so don't be too concerned with what exactly a plugin is at this point. Suffice it to say that a plugin is a script that performs a certain task in Grunt. These tasks can be run individually or as a series of tasks that run as part of what is called a custom task. Some examples of common tasks are as follows:

JSHint: JSHint runs JavaScript validation (lint). This runs code that analyzes JavaScript for errors or syntax that has the potential to be a bug.
Uglify: This task minifies files by removing all excess characters from code without changing or breaking the functionality of the code.
LESS: This is a task that compiles LESS files into CSS files.
Watch: This responds to additions, changes, and deletions of files by running preconfigured tasks, for instance, if you wish to build your project or run lint on files every time the file is changed and saved.

An example usage scenario, using these tasks listed, might be to run JSHint to lint JavaScript source files. If errors exist, the task halts and provides message(s) related to the errors and warnings found. If no errors exist, then the task completes and the Uglify task is run to minify the JavaScript source files, outputting them to the distribution directory. Next, the LESS task is run to generate and output CSS to the distribution directory. Finally, the Watch task is run so that it will continue to monitor changes to files when they occur. Watch might start the entire build process again without any user interaction. This is really powerful and frees up the developer who would otherwise need to perform each task manually every time files were changed.

There are many official plugins such as these that have been created and are maintained by the Grunt team. Official plugins are prefixed with contrib-, so the naming of plugins listed previously would be found as contrib-jshint, contrib-uglify, contrib-less, and contrib-watch as each one of these plugins is officially maintained by the Grunt team.

There are unofficial plugins created and contributed to the project by other organizations and developers as well. Examples of common unofficial plugins include the following:

concurrent: This runs tasks concurrently
newer: This runs tasks on source files that have changed
open: This opens URLs and files from a task
notify: This provides automatic desktop notifications for errors and warnings

What has been listed here isn't even the tip of the iceberg of the plugins available to add to your project for workflow automation. You might find that you are spending time on a task that is repetitive and error prone. What if you could write a script that would perform this task for you and ensure that it is done correctly every time? Well, with Grunt, you can create your own plugins and even contribute them to the NPM registry so that others who have the same need can benefit.

Now that we have a bit of introduction of what Grunt can do, let's discuss more about the Node.js and NPM dependencies. In the following sections, we will get to know some introductory information about Node.js and NPM. We will look at procedures for the installation of Node, which will include upgrade processes as well as pristine installations on both Mac and Windows. The Grunt Command Line Interface will be introduced; this is where we will actually begin working with Grunt tooling:

An overview of Node.js and NPM
Upgrading or installing Node.js
Using NPM to manage the Grunt CLI

Grunt.js and Grunt plugins require Node.js and NPM in order to be installed. As a result, Node.js and NPM are dependencies of Grunt. Node.js is the server environment in which Grunt will run. NPM is the package manager that will be used to install plugins from the NPM repository. NPM will make it easy to install code written by other developers who have shared their solutions so that others, such as us, can benefit from reuse.

In order to go further into details about Node.js and NPM, the following questions will be answered in this section:

What is Node.js and NPM?
Where can I find Node.js and NPM?

What is Node.js and NPM?

Node.js is a runtime environment that uses the Google V8 engine to execute JavaScript on your machine, be it OS X, Windows, Linux, or SunOS (at the time of writing). There are also some unofficial builds for other platforms provided by members of the community. If you use the Google Chrome web browser, then you are using an application built with the Google V8 engine. Google V8 implements ECMAScript and is an open source project. If you have not heard of ECMAScript prior to this book, ECMAScript is a language standards specification. Some well-known languages, which are varying degrees of implementation of ECMAScript, are JavaScript, Microsoft's jScript, and Adobe's ActionScript. By varying degrees, it is to be understood that a language such as JavaScript is not ECMAScript; rather, the JavaScript core implementation is based on ECMAScript, yet JavaScript implements features that are in addition to ECMAScript.

So, what is Node? The Node.js platform is an asynchronous event-driven framework, which allows developers to create network applications (for example, HTTP or SMTP). Node allows developers to create applications running on a host that can be accessed by clients on another host, for instance, a web browser accessing a website or an e-mail application requesting mail on a mail server. This is by no means the limit of the functionality of Node.js. Applications can be built to run on the Node.js environment, which do not require client/server architecture between separate hosts. In fact, Grunt.js is an example of an application that runs on Node.js within the same host environment. The Node.js environment makes it possible to write JavaScript programs that are not reliant on browser interpretation. Node.js allows developers to write JavaScript applications that run as server-side applications.

Node.js provides a package manager that we will use to install Grunt, aptly named Node Package Manager (NPM). NPM provides access to scripts and applications in the NPM registry along with the ability to manage these applications on the user's machine for installation and updates as well as some additional features such as publishing packages. Grunt and Grunt plugins require NPM to be installed because they are managed with NPM. A package manager is an application that provides a utility for developers to share and provide updates to their plugins, which, in turn, end users can use in order to install, configure, update, and remove these applications from their machines. NPM will provide you with just such a utility needed for Grunt and Grunt plugins. We will use NPM regularly to install and possibly update packages while we set up and configure Grunt in our application in order to provide task automation.

Where can I find Node.js and NPM?

Node.js is an open source project that is maintained by individuals who collaborate and help steer future development efforts of the platform:

All of the documentation and information about Node.js can be found on the Node.js organization website, https://www.nodejs.org/. Node.js isn't a brand new technology, yet it isn't that old either; Node.js' first release, v0.0.1, on GitHub was on May 27, 2009. Applications intended to run on the Node.js platform are written in JavaScript, allowing developers to leverage the expressiveness of JavaScript outside of the browser in a server-side environment.

NPM used to be a separately maintained project from Node.js, so in previous versions of Node.js, NPM was obtained through a separate installation. NPM is now provided as part of the Node.js core installation; when you install Node.js, you will have NPM without any further installation requirements. All that you will need to do is proceed to the downloads page on the Node.js site, https://nodejs.org/download/, choose the prebuilt installer for your platform, and download it on your machine. We will go over the upgraded and pristine installation of Node.js for both Mac and Windows in the next sections.