Different types of tools

When working with Bootstrap, there are really three types of tools you need to be aware of. The first two are Node.js and Grunt.js. These are build <ie>tools</ie> and they take the development framework files and build them into the final files that you want to include in the production version of your projects. You wouldn't include development files on your actual production web server, as they are tools. You want to compile your files into production-ready HTML, CSS, and JavaScript that a web server can read and a browser can translate into a website.

The second type of tool you might want to use is a static website generator such as Harp.js. I talked a little bit about Harp in the first chapter but I will review it again in a little more detail. The main advantages of using Harp are things such as variables and partials in HTML, and a reusable-template-based system for your pages that allows you to reuse code.

The final types of tool you can use with Bootstrap are CSS preprocessors. In Bootstrap 4, the only option is Sass and we'll cover that in more depth later. However, before you can really start to learn to use Sass, you need to learn how to compile it into regular CSS files. Once you do, you can also start to use things such as variables and mixins in your CSS to make your files cleaner and easier to write.

Installing Node.js

If you skipped installing Node.js in Chapter 1 , Introducing Bootstrap 4 then now is the time to follow along and install and configure all your build tools. Let's start by heading to its website, https://nodejs.org, and downloading Node.js:

Note

Node is a JavaScript runtime that uses Google Chrome's V8 JavaScript engine. What that means is that Node is a JavaScript-based web server that you can run locally or in production. It includes an event-driven, non-blocking I/O model which is easy to use and lightweight. Node comes with a built-in package manager called npm which includes the largest ecosystem of open source libraries on the Web.

Follow the installation instructions on the Node.js website and once you're done, open up a command-line application such as Terminal or Cygwin. Run the following command:

$ node -v

This will print out the Node.js version number that you installed and will confirm that it worked. It should look something like this if successful:

$ v0.10.33

Updating npm

Now that Node is installed, let's ensure that the latest version of npm is also installed. npm is a package manager for Node and allows you to install useful tools such as Grunt, which we'll do in our next step.

To make sure the latest version of npm is installed, run the following command in the Terminal:

npm update -g npm

Note

You may need to include sudo before this command in some cases.

Once the update is complete, we can safely start to install the other packages we'll need for our Bootstrap development environment.

Installing Grunt

Grunt is a JavaScript task runner and it's the tool that will do the actual compiling and building of the development Bootstrap files into the production versions.

Grunt provides automation and allows you to chain together repetitive tasks such as compiling, minification, linting, and unit testing. Therefore, it's commonly used in frameworks such as Bootstrap to build the source files into production. To install Grunt, run the following command in the Terminal:

npm install -g grunt-cli

If you receive any errors, you may need to add sudo to the beginning of the above command. After finishing your installation, run the following command to check the Grunt version number and confirm that everything is working properly:

$ grunt -V

You should expect to see something like this printed out in the Terminal:

grunt-cli v0.1.13