treehouse ™

Get Started With Grunt

treehouse ™

What is Grunt?

‟The JavaScript Task Runner”

Compiles Sass into CSS

Compress JavaScript, CSS, HTML files

Combine JS files into a single file

treehouse ™

task

An automated command. You can create your own or choose from around 4,000 Grunt plugins

concatenate, minify, compile, etc.

treehouse ™

Demo

treehouse ™

Software dependencies

Node: a JavaScript runtime

npm: Node Package Manager

Grunt-CLI: command-line interface to run Grunt

Grunt: the actual task runner

Grunt plugins: thousands to choose from

treehouse ™

High Level Overview

Install node.js

Install grunt-cli

Create package.json file

Install grunt

Install plugins

Create gruntfile.js file

http://nodejs.org

http://blog.teamtreehouse.com/install-node-js-npm-mac

treehouse ™http://teamtreehouse.com/library/nodejs-basics

treehouse ™

About Grunt Node Packages

There are two Grunt node packages:

1. grunt-cli is installed one time for the entire system (-g)

npm install -g grunt-cli

2. grunt is installed for each project in the project directory

npm install grunt

npm install -g grunt-cli

Install Grunt-cli

doesn’t matter what directory you run this command from, it’s a global installation

treehouse ™

The Project

treehouse ™

Two Files You Need Understand

1. package.json describes your project: name, git repository, but most importantly your npm dependencies

2. gruntfile.js is the file that loads plugins, configures those plugins and defines tasks

these files live in the project’s main directory

cd ~/Documents/project_directory

npm init

Creating the package.json file

then follow the instructions...

npm install grunt --save-dev

Install Grunt

--save-dev adds this to your list of packages in the package.json file

treehouse ™

Create gruntfile.js

Create in project’s main directory

What does it do?

Configures tasks

Loads plugins

Registers tasks

The gruntfile.js skeleton

module.exports = function(grunt) {

// Configure task(s) grunt.initConfig({

});

// Load the plugins grunt.loadNpmTasks( );

// Register task(s). grunt.registerTask('default', [ ]);

};

The gruntfile.js skeleton

module.exports = function(grunt) {

// Configure task(s) grunt.initConfig({

});

// Load the plugins grunt.loadNpmTasks( );

// Register task(s). grunt.registerTask('default', [ ]);

};

this is a node thing...

The gruntfile.js skeleton

module.exports = function(grunt) {

// Configure task(s) grunt.initConfig({

});

// Load the plugins grunt.loadNpmTasks( );

// Register task(s). grunt.registerTask('default', [ ]);

}; this is the stuff you change

Load the package.json file

module.exports = function(grunt) {

// Configure task(s) grunt.initConfig({

pkg: grunt.file.readJSON('package.json'), });

// Load the plugins grunt.loadNpmTasks( );

// Register task(s). grunt.registerTask('default', [ ]);

};

treehouse ™

Steps to Adding a Task

Load the plugin

npm install <plugin-name> --save-dev

Add configuration to gruntfile.js

Load plugin in gruntfile.js

Register the task in gruntfile.js

treehouse ™

uglify your JavaScript

Shrink your file footprint and combine your JavaScript files with Uglify

npm install grunt-contrib-uglify --save-dev

Install uglify

must run this command within the project directory

// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { } });

Configure: gruntfile.js

// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/js/*.js', dest: 'js/script.min.js' }

} });

Configure: gruntfile.js

treehouse ™

About File Organization

src/js: directory holding my working JavaScript files

js: directory holding my final compressed and concatenated file

// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'src/js/*.js', dest: 'js/script.min.js' }

} });

Configure: gruntfile.js

output file

source javascript files

// Load the plugins grunt.loadNpmTasks('grunt-contrib-uglify');

Load the plugin: gruntfile.js

// Register task(s). grunt.registerTask('default', ['uglify:build']);

Register the task: gruntfile.js

all together

// Configure task(s) grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

uglify: { src: 'src/js/*.js', dest: 'js/script.min.js' } });

// Load the plugins grunt.loadNpmTasks('grunt-contrib-uglify');

// Register task(s). grunt.registerTask('default', ['uglify']);

grunt

Run it!

must run this command within the project directory

treehouse ™

dev tasks vs. build tasks

// Configure task(s) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build : { src: 'src/js/*.js', dest: 'js/script.min.js' }

} });

Create a build task: gruntfile.js

Update the task name: gruntfile.js

// Register task(s). grunt.registerTask('build', ['uglify:build']);

grunt build

Run it!

treehouse ™

dev tasks

Don’t minify code, but do concatenate files

dev: { options: { beautify: true, mangle: false, compress: false, preserveComments: 'all' }, src: 'src/js/*.js', dest: 'js/script.min.js' }

Create a dev task: gruntfile.js

Register the dev task: gruntfile.js

// Register task(s) grunt.registerTask('default', ['uglify:dev']); grunt.registerTask('build', ['uglify:build']);

treehouse ™

watching tasks

npm install grunt-contrib-watch --save-dev

Install watch

must run this command within the project directory

watch : { js: { files: ['src/js/*.js'], tasks: ['uglify:dev'] } }

Configure: gruntfile.js

when these files change

run this task

// Load the plugin grunt.loadNpmTasks('grunt-contrib-watch');

Load the plugin: gruntfile.js

grunt watch

Run watch

You don’t need to register the watch task, just call it  

treehouse ™

compile Sass

npm install grunt-sass --save-dev

Install Grunt Sass

Don't use grunt-contrib-sass — it uses slower Ruby-based compiler

treehouse ™

About File Organization

src/scss/application.scss:main Sass file

css/styles.css: my compiled CSS file

sass: { dev: { options: { outputStyle: 'expanded' }, files: { 'css/styles.css' : 'src/scss/application.scss' } } }

Configure: gruntfile.js

...into this file compile this file...

// Load the plugins grunt.loadNpmTasks('grunt-sass');

Load the plugin: gruntfile.js

// Register task(s). grunt.registerTask('default', ['uglify:dev', 'sass:dev']);

Register the task: gruntfile.js

'default'

watch : { js: { files: ['src/js/*.js'], tasks: ['uglify:dev'] }, css: { files: ['src/scss/**/*.scss'], tasks: ['sass:dev'] } }

Add to watch: gruntfile.js

when these files change

run this task

build: { options : { outputStyle: 'compressed' }, files: { 'css/styles.css' : 'src/scss/application.scss' } }

Add Sass Build Task: gruntfile.js

minify the files

grunt build

Run it!