Skip to content

Grunt

Jump to bottom Edit New page
Adam Argyle edited this page Jun 15, 2015 · 2 revisions

Grunt CLI

grunt
Default task runs grunt dev but with notifications, a server, and BrowserSync. This creates a Live Reload environment, with legible code output for easy debugging, and is ready for rapid prototyping. Behind the scenes, the grunt watch command uses grunt newer so that it's only compiling or copying the files that have changed.

grunt dev
Legible js and css output, no server

grunt --prod
Runs all tasks with super crunch options turned on, and also runs a server so you can test the build in browser. This will also include an appcache manifest, so your visitors will get a super cached browser experience.

grunt heroku
Runs prod tasks without a server. So produces super crunched up html/css/js, ready to be dropped onto a server somewhere and served up.

grunt bump
Uses the version in package.json, increments it, and creates a .git tag. Awesome for lazy release creation. Easily add it to grunt prod if you want to.

grunt subl Opens the app.sublime-project file. AKA open app.sublime-project or subl app.sublime-project. Just forget about it.

Clean Grunt task architecture

See the tasks/ directory. All Grunt work is written in coffeescript because it's pretty, no other reason. Checkout the Gruntfile, notice no long file mess! Clean and easy to CRUD. Very easy task management, sharing, readability, etc. Some people clone Bolt just for this ;)

Grunt Tasks

  • BrowserSync: Proxy to a local server, sync interactions, hot push CSS
  • Bump: Use grunt to manage your releases, easily make this part of your prod build job
  • Clean: Wipes the build directory
  • Concurrent: Runs jade/stylus/copy tasks in parallel to keep the build fast
  • Connect: Static web server
  • Copy: Copy images, js, and more to the build directory
  • Imagemin: Minifies images in the prod build job
  • Jade: Compiles templates, site, and ajax content
  • Manifest: Create an appcache manifest automatically
  • Notify: Custom notifications when build jobs complete
  • Shell: Run custom shell commands from grunt, this can do all sorts of good stuff
  • Stylus: Compiles all stylus files, with source maps during dev.
  • Uglify: Crunches and combines javascript
  • CSSo: Stylus doesnt do the best crunching, CSSo does amazing things to your css before sending it to production.
  • PurifyCSS Removes CSS not used in your project, drastically reducing file size in most instances.
  • Watch: Runs tasks when certain files change
Add a custom footer
Add a custom sidebar
Clone this wiki locally