CINXE.COM

Grunt: The JavaScript Task Runner

<!DOCTYPE html><html lang="en" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/WebPage"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Grunt: The JavaScript Task Runner</title><link rel="stylesheet" href="/css/main.css"><link rel="apple-touch-icon" href="/img/favicons/apple-touch-icon.png" sizes="180x180"><link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16"><link rel="manifest" href="/img/favicons/manifest.json"><link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#e48632"><link rel="shortcut icon" href="/img/favicons/favicon.ico" type="image/x-icon"><meta name="msapplication-config" content="/img/favicons/browserconfig.xml"><meta name="theme-color" content="#e48632"><meta property="og:title" content="Grunt: The JavaScript Task Runner"><meta property="og:type" content="website"><meta property="og:url" content="https://gruntjs.com/"><meta property="og:image" content="https://gruntjs.com/img/og.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="256"><meta property="og:image:height" content="256"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@gruntjs"><meta name="twitter:site" content="@gruntjs"><meta name="twitter:title" content="Grunt: The JavaScript Task Runner"><meta itemprop="name" content="Grunt"><meta itemprop="image" content="/img/og.png"><link href="/rss" rel="alternate" title="Grunt Blog Feed" type="application/atom+xml"></head><body class="page-index"><div class="banner"> <a href="support">V1.6.1 is the current version, and previous versions are not supported. Upgrade to the latest version or consider other support options.</a></div><div class="navbar navbar-inverse"><div class="navbar-inner"><div class="container"><a class="brand" href="/"><span class="logo"></span></a><div class="nav-collapse collapse"><ul class="nav"><li><a href="/getting-started"><i class="icon-arrow-right"></i><span>Getting Started</span></a></li><li><a href="/configuring-tasks"><i class="icon-cog"></i><span>Configuring Tasks</span></a></li><li><a href="/plugins"><i class="icon-power-cord"></i><span>Plugins</span></a></li><li><a href="/documentation"><i class="icon-file-text"></i><span>Documentation</span></a></li><li><a href="/support"><i class="icon-file-text"></i><span>Support</span></a></li></ul><form class="navbar-search pull-right"><input class="search-query" type="text" placeholder="Search"></form></div><!--.nav-collapse--></div></div></div><div class="content"><div class="container"><div class="row-fluid"><div class="span9 page"><div class="hero-unit"><div class="home-header"><div class="title-header"><span class="grunt-name">Grunt</span><span class="tag-line">The JavaScript Task Runner</span></div></div><div class="why pull-left"><h2>Why use a task runner?</h2><p>In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a <a href="/sample-gruntfile">Gruntfile</a>, a task runner can do most of that mundane work for you鈥攁nd your team鈥攚ith basically zero effort.</p></div><div class="why pull-right"><h2>Why use Grunt?</h2><p>The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to <a href="/getting-started">get started</a>.</p></div><div class="technology"><h2>Available Grunt plugins</h2><p>Many of the tasks you need are already available as Grunt Plugins, and new plugins are published every day. While the <a href="/plugins">plugin listing</a> is more complete, here's a few you may have heard of.</p><div><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-coffee"><img src="/img/logo-coffeescript.jpg" alt="CoffeeScript" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-handlebars"><img src="/img/logo-handlebars.jpg" alt="Handlebars" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-jade"><img src="/img/logo-jade.jpg" alt="Jade" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-jshint"><img src="/img/logo-jshint.jpg" alt="JSHint" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-less"><img src="/img/logo-less.jpg" alt="Less" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-requirejs"><img src="/img/logo-requirejs.jpg" alt="Require.js" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-sass"><img src="/img/logo-sass.jpg" alt="Sass" width="175" height="110"></a><a class="technology" href="https://www.npmjs.com/package/grunt-contrib-stylus"><img src="/img/logo-sylus.jpg" alt="Stylus" width="175" height="110"></a></div></div><div class="grunt-preview"><h2>Here's a preview!</h2><p>While installing grunt is simple, it's slightly more involved to get it running on your project. To see what your effort will win you, take a look at this example output from running Grunt in a <a href="https://github.com/cowboy/jquery-tiny-pubsub">sample project</a>.</p><!-- THX 2 @GF3 4 THE CSS <3!!--><pre class="terminal"><span class="command-prompt">grunt</span> Running "jshint:gruntfile" (jshint) task <span class="green">&gt;&gt;</span> 1 file lint free. Running "jshint:src" (jshint) task <span class="green">&gt;&gt;</span> 1 file lint free. Running "jshint:test" (jshint) task <span class="green">&gt;&gt;</span> 1 file lint free. Running "qunit:files" (qunit) task Testing test/tiny-pubsub.html....<span class="green">OK</span> <span class="green">&gt;&gt;</span> 4 assertions passed (23ms) Running "clean:files" (clean) task Cleaning "dist"...<span class="green">OK</span> Running "concat:dist" (concat) task File "dist/ba-tiny-pubsub.js" created. Running "uglify:dist" (uglify) task File "dist/ba-tiny-pubsub.min.js" created. Uncompressed size: <span class="green">389</span> bytes. Compressed size: <span class="green">119</span> bytes gzipped (<span class="green">185</span> bytes minified). <span class="green">Done.</span> <span class="command-prompt active"><span class="active-prompt"></span></span></pre></div><div class="who-uses-grunt"><h2>Who uses Grunt?</h2><p>These are just a few companies and projects that are using Grunt.<a href="/who-uses-grunt">See more here.</a></p><div><a class="technology" href="/who-uses-grunt"><img src="/img/logo-twitter.jpg" alt="Twitter" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-jquery.jpg" alt="jQuery" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-adobe.jpg" alt="Adobe" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-modernizr.jpg" alt="Modernizr" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-bocoup.jpg" alt="Bocoup" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-fg.jpg" alt="Filament Group" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-saucelabs.jpg" alt="Sauce Labs" width="175" height="110"></a><a class="technology" href="/who-uses-grunt"><img src="/img/logo-bitovi.jpg" alt="Bitovi" width="175" height="110"></a></div></div><div class="how-get-started"><h2>How do I get started?</h2><p>Read the <a href="/getting-started">Getting Started</a> guide for instructions on using Grunt in your projects. Once you've done that, check out a <a href="/sample-gruntfile">Sample Gruntfile</a> and learn more about <a href="/configuring-tasks">Configuring Tasks</a>.</p></div><div class="openjsf-block"><hr><p>Grunt is an OpenJS Foundation project.</p><div><a href="https://openjsf.org/projects/"><img src="/img/open-jsf-logo.svg" alt="OpenJS Foundation" width="280" height="88"></a></div></div></div></div><div class="span3"><div class="well sidebar-nav"><div class="latest-version"><h3>Latest Version</h3><ul><li>Stable: <a href="https://www.npmjs.org/package/grunt">v1.6.1</a><span> (npm)</span></li><li>Development: <a href="https://github.com/gruntjs/grunt">HEAD</a><span> (GitHub)</span></li></ul></div><div class="latest-news"><h3>Latest News</h3><ul><li><a href="/blog/2021-04-22-grunt-1.4.0-released"><span class="title"> Grunt 1.4.0 released</span><span class="date">April 22, 2021</span></a></li><li><a href="/blog/2020-07-03-grunt-1.2.0-released"><span class="title"> Grunt 1.2.0 released</span><span class="date">July 03, 2020</span></a></li><li><a href="/blog/2020-03-16-grunt-1.1.0-released"><span class="title"> Grunt 1.1.0 released</span><span class="date">March 16, 2020</span></a></li></ul></div><div class="getting-started"><h3>Getting Started</h3><p>Read the <a href="/getting-started">Getting Started</a> guide for instructions on using Grunt in your projects. Once you've done that, check out a <a href="/sample-gruntfile">Sample Gruntfile</a> and learn more about <a href="/configuring-tasks">Configuring Tasks</a>.</p></div><div class="social"><a class="github" href="https://github.com/gruntjs/" title="Grunt on GitHub"><span class="icon-github"></span></a><a class="twitter" href="https://twitter.com/gruntjs/" title="Grunt on Twitter"><span class="icon-twitter"></span></a><a class="feed" href="/rss" title="Grunt blog RSS feed"><span class="icon-rss"></span></a></div></div></div></div></div></div><footer class="grunt-footer"><div class="inner"><div class="container"><ul class="pull-right"><li><a href="/blog">Blog</a></li><li><a href="/upgrading-from-0.3-to-0.4">Migration Guides</a></li><li><a href="/contributing">Contributing</a></li><li><a href="/development-team">Development Team</a></li><li class="social"><a href="https://github.com/gruntjs/" title="Grunt on GitHub"><span class="icon-github"></span></a></li><li class="social"><a href="https://twitter.com/gruntjs/" title="Grunt on Twitter"><span class="icon-twitter"></span></a></li><li class="social"><a href="/rss" title="Grunt blog RSS feed"><span class="icon-rss"></span></a></li><li class="openjs"><a href="https://openjsf.org/" title="OpenJS Foundation"><img src="/img/openjsf-color-textw.svg" alt="OpenJS Foundation" width="100" height="31"></a></li></ul></div></div></footer></body></html>

Pages: 1 2 3 4 5 6 7 8 9 10