qrator

by andyhot on javascript, tech

The 26 grunt plugins we use at qrator.com

There has recently been renowned interest in javascript build tools and task runners, with grunt.js being the most popular one and gulp and brocolli the new kids in town!

At qrator.com, we have been using grunt to manage the worklflow for our emberjs application. Our Gruntfile.js was originally created with the yeoman emberjs generator but has since grown to 633 lines of code. We are now using many grunt plugins for the several different aspects of the app and here’s a list of the most important ones:

  • matchdep: This contains helpers to filter the dependecies of a project. It enables loading all other grunt plugins with the following line of code require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

  • grunt-contrib-connect: Starts a connect web server. This just serves our app.

  • grunt-contrib-livereload: Reloads browser when changes occur in the source files (js, html, css).

  • grunt-open: This just open urls and files – it’s used to start the browser with our app.

  • grunt-contrib-jshint: Lints js code. We’ve set this up to be triggered as a pre-commit hook.

  • grunt-jsbeautifier: Helps with beautifying and keeping a consistent syntax in your javascript files. We’ve also set this up to be triggered as a pre-commit hook.

  • grunt-mocha: Runs our client-side mocha specs.

  • grunt-contrib-coffee: Compiles coffeescript files.

  • grunt-contrib-compass: Compiles sass files using the compass ruby project. Latest versions can generate sourcemaps which are quite handy while developing.

  • connect-url-rewrite: Rewrites urls. This is useful in our case for making css/js sourcemaps work.

  • grunt-preprocess: Preprocesses files using a syntax based on conditional comments. We use this to generate different versions for testing, development and deployment of our index.html file.

  • grunt-rev: Does static file asset revisioning through content hashing. We use this plugin for versioning our final js and css files and are planning to use it for images.

  • grunt-usemin and grunt-useminPrepare: Used in conjuction with grunt-rev, this plugin replaces references to non-optimized scripts or stylesheets (or any file) into a set of HTML files (or any templates/views).

  • grunt-contrib-imagemin: Compresses images without affecting their quality.

  • grunt-contrib-cssmin: Compresses css.

  • grunt-contrib-uglify: Compresses js.

  • grunt-concurrent: Runs tasks concurrently.

  • grunt-ember-templates: Precompiles Handlebars templates for Ember.js.

  • grunt-neuter: Concatenates files in the order they are required. This is used to break up the application in multiple folders and js files. Ideally this will eventually be replaced by a pure js solution like require.js or converting to ES6 modules and using the grunt-es6-module-transpiler.

  • grunt-ssh: This is used to sftp the packaged app to production or staging servers.

  • grunt-contrib-compress: Compresses files and folders. Useful for email delivery.

  • grunt-shell: Runs shell commands. This is used to integrate several useful shell scripts into the grunt workflow.

  • grunt-conventional-changelog: Generates a changelog using git metadata. Useful to know what has changed between releases.

  • grunt-bump: Bumps package version (in package.json), creating the appropriate tags and optionally commiting/pushing the changes. We use it in conjuction with grunt-conventional-changelog.

  • grunt-phantomas: A phantomJS-based web performance metrics collector and monitoring tool. Useful to see how your app performs in several different key metrics.

  • There’s an internal plugin that allows local overrides to the Gruntfile.js. This is useful in order to disable specific behavior in certain environments (for instance, image minification is not totally reliable in windows environments, and same goes for compass’s sourcemaps). One can achieve something similar with grunt-local-settings.

And as a final piece of emberjs related advice, if you’re currently bootstraping your emberjs application, it’s best to forgo yeoman (i don’t believe the ember generator is maintained any more) and use Ember App Kit. Additionally, if you’re going to bootstrap in a few weeks, you should definitely check out Ember CLI