Scribd
Upload
220 views17 pages

Grunt: The Javascript Task Runner

Grunt is a JavaScript task runner that runs on Node.js. It has over 5,000 plugins for tasks like concatenation, minification, and CSS preprocessing. Grunt brings consistency to development teams by automating repetitive tasks. To use Grunt, install Node.js, then the Grunt CLI. Create a package.json file to manage dependencies and a Gruntfile.js to configure and load plugins and tasks. Common tasks include minification, linting, and live reloading. Grunt is well-suited for front-end development builds and workflows.

Uploaded by

Milena Vojinovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
220 views17 pages

Grunt: The Javascript Task Runner

Grunt is a JavaScript task runner that runs on Node.js. It has over 5,000 plugins for tasks like concatenation, minification, and CSS preprocessing. Grunt brings consistency to development teams by automating repetitive tasks. To use Grunt, install Node.js, then the Grunt CLI. Create a package.json file to manage dependencies and a Gruntfile.js to configure and load plugins and tasks. Common tasks include minification, linting, and live reloading. Grunt is well-suited for front-end development builds and workflows.

Uploaded by

Milena Vojinovic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

GRUNT

The JavaScript Task Runner


Overview
★ What is Grunt?
★ Why use Grunt and what’s great about Grunt?
★ How to use Grunt?
What is Grunt?
★ JavaScript task runner
★ A command-line build tool
★ Runs on Node.js
★ Has a rich and ever-growing library of
plugins, installed using npm
Why use Grunt?
Why use Grunt?
★ Rich library of plugins ( almost 5000)
★ Deal with repetitive task - Concatenation, Minification, Css
preprocessing

★ Has a great (documented) API


★ Cross platform tool
What’s great about Grunt?
★ Good chance of finding a plugin that does
what you want
★ If not, easy to adapt an existing one or write
one yourself
★ One of the best things about Grunt is the
consistency it brings to teams.
First steps
(Assuming you have Node installed)

★ Install the Command Line Interface (CLI) with following


command:

npm install -g grunt-cli

Note: This isn’t Grunt.js itself. This just helps manage our multiple versions of
Grunt on machine.
Grunt dependencies
Both files live together at the root of our project.

★ package.json - File used by npm to store metadata about


projects. Its biggest use is to help manage dependencies used by our
Grunt.js task.

★ Gruntile.js - Configures/defines tasks and load grunt plugins.


Creating a Grunt Project
Make it easy on yourself: use grunt-init
# Use npm to create a package.json
$ npm init

# Install grunt
$ npm install grunt --save-dev

# Use grunt-init to scaffold a Gruntfile.js


$ npm install -g grunt-init
$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git
./.grunt-init/gruntfile
$ grunt-init .grunt-init/gruntfile
package.json
{
"name": "grunt-js",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "^0.9.1",
}
}
Gruntfile.js
Comprised of:

★ The “Wrapper” function


★ Project and task configuration
★ Loads Grunt.js plugins and tasks
★ Defining task aliases and custom tasks
Example of Gruntfile.js
module.exports = function(grunt) {

// Project (task) configuration is specified via the grunt.initConfig method.


grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

// Load the plugin that provides the "uglify" task.


grunt.loadNpmTasks('grunt-contrib-uglify');

// Registering task(s) - Default task(s).


grunt.registerTask('default', ['uglify']);

};
Executing Grunt Tasks
# Execute the default task alias
$ grunt

# Execute a particular task


$ grunt uglify

# Execute a particular option of a task


$ grunt uglify:primary
Types of Grunt Tasks
★ Alias task
grunt.registerTask(‘name’, ‘description’, [tasklist]);

★ Function task
grunt.registerTask(‘name’, ‘description’, function);

★ Multi-task
grunt.registerMultiTask(‘name’, ‘description’, function);
Grunt: What is it Good For?
★ Simple builds (front-end dev)
★ Complicated builds (front-end and
back-end)
★ Continuous workflow automation
(watch, livereload)
★ Not just for JS projects
Who uses Grunt?
★ These are just a few companies and projects
that are using Grunt.
Grunt: The JavaScript Task Runner

Thanks!

gruntjs.com

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy