LearnYoga

Grunt ch. 1 - a default task

Grunt is known as "the JavaScript task runner" and it allows the programmer to set up one or many tasks to carry out conversion and processing of files.
An ecosystem of plugins on NPM enable such tasks as converting SCSS to CSS, ES6 JavaScript to ES5 JavaScript, CSS to minified CSS, CoffeeScript to JavaScript, JavaScript to minified JavaScript, and more.

Grunt requires NodeJS and NPM. If you are not sure if they are installed on your system, type these commands into your terminal:

node --versionnpm --version

If you see version numbers, you are ready. If not, install whichever one you don't yet have: the instructions on their web sites should be helpful.

Now we need to install Grunt. Open the terminal on your Mac (this may also work on Windows or Linux but you may have to do a few things differently) and type this in to your command line:

npm install -g grunt-cli

You may need to type 'sudo' in front of your npm commands like the one above, which will typically require a password.

This will install the Grunt command line tools. Now we can run the grunt command.

A Grunt setup will typically have these parts: a directory for the incoming files, a directory for the output of the Grunt task when it's run, a 'node_modules' directory for the plugins, a Gruntfile to define the configuration of the whole setup, and (optionally) a package.json to keep track of the NPM modules.

Grunt setups can be created by web developers who are looking for a convenient way to run certain plugins crucial to their workflow, and they can also be built into larger existing projects for the purpose of processing the assets in the code. This chapter looks at the first type of setup, while the second kind will be examined when we look at the Bootstrap 4 Grunt setup in chapter 2.

Now we can set up our Grunt installation for this chapter. It's going to run a series of different plugins on the files in the /src directory based on their file types and put the results in the /build/src directory. Let's take a look at the Gruntfile:

So let's make our Grunt install. Create a new new directory in Finder (or use mkdir DIRNAME on the command line) and name it whatever you want and open it with a double-click (or cd DIRNAME) and then inside that directory create the above Gruntfile, an empty subdirectory named /build, another one named /source, and another named /node_modules.

Now add the file seen below to the root of the project and name it 'package.json'.

The pieces are falling into place! Now that we have configured our setup with the Gruntfile, noted which NPM modules we need to install with the package.json, and provided the needed subdirectories, we need only to do two more things: install the plugins using NPM and then place the assets we want to process in the /src directory.

Open your terminal and move to the directory that your project is in. Type this command to see what's in your directory:

ls -li -a

If you see Gruntfile, package.json, node_modules, build, and src listed, the you're ready to install. If not you may need to go back and check that you followed all the steps.

Provided everything is in its right place, type this in the terminal (you will probably be prompted for a password):

sudo npm install

You should see your terminal doing stuff, listing the packages installing. When it's done you should see your prompt again. Now it should be ready to use.

So let's get a few files to process. Download this file and save it as joeypc.js in your /src directory.

Now we can run Grunt. The Gruntfile is configured (as you can see above) to run all the plugins under the 'default' task, which is set up to process everything in /src. What type of files (specifically their file ending such as .js or .css) are in the directory determines what is done with them--for example, CSS is 'minify'-ed for smaller file size, JavaScript undergoes an analogous process known as 'uglify,' while CoffeeScript and TypeScript files are processed into pure JavaScript. Markdown and Jade are processed into HTML. And these are just the plugins that I've used in this Grunt setup!

If you look at the files you put in /src, you will find CSS and JavaScript files which are in typical, 'development' style where the code is indented and spaced and should be easy to read. But machines don't care about stuff like that, so when putting a site into production many developers preferred to do some sort of 'minify' process on their code for smaller file sizes and other optimization reasons [for example Uglify even shortens the names of variables].

Let's try this thing out. Make sure you are still your Grunt directory and type the following in order to run the default task:

grunt

Grunt should echo back some information about the tasks (or actually, sub-tasks) it is running and then return you to your prompt after saying whether it was successful and how long it took. If it give you indications of success, take a look at your /build directory [and probably inside its own /src directory] and you should see files with the same names (ryukyu.js and ryukyu.css) but if you open them up in a text editor they should look much different from the development versions that you put in your /src directory.

If you want, try downloading the code for the JS libraries jQuery and Underscore and uglify them, or find some SCSS on the web and see how that looks when converted to CSS, or try creating a file in the Jade templating language or the Markdown markup language and converting it to HTML.

Congratulations! You now have a working Grunt setup, one that you can use as is to do processing tasks in your development workflow or one that you can edit to better suit your needs. Best of luck!

When you're ready to learn more, take a look over at chapter 2 to see how the programmers of the popular Bootstrap front-end framework use Grunt.