One year ago

I presented a talk about the Census Explorer we made for SBS

python extract-jade.py
# Manual copy pasting
./combine.sh
uglify js/combined.js > js/minified.js
# zip up and email the files to the client

Evolution

Over time our build processes has evolved.

• New technologies
• New requirements
• Laziness

Javascript Build

We used AMD for a long time

r.js -o build.js
r.js -o build-ie.js

And recently swapped to browserify

browserify main.js -t coffeeify -o bundle.js

Pushing to production

Changes almost project to project.

• Uploading manually to S3
• Uploading manually to FTP
• git pull on server
• git aws.push, git push heroku master, etc.

Solutions

Don't be afraid, there are solutions.

• Shell scripts
• make
• package.json scripts: {}
• or...

One project

{
    "scripts": {
      "start": "beefy src/app/bootstrap.coffee:bundle.js --live -- -t coffeeify -t simple-jadeify -t ractify",
      "bundle": "browserify src/app/bootstrap.coffee -t coffeeify -t simple-jadeify -t ractify > bundle.js",
      "start-server": "POLL=10000 node app/server.js",
      "app": "mkdir -p dist/{app,data}; npm run bundle && npm run stylus && (rm dist/app/app.nw||true) && npm run zip && npm run copier",
      "copier": "cp ./vendor/nw/* ./dist/app/ && npm run osx-copy && cp -r ./app/data/ ./dist/data/ && cp ./{app,dist}/start.bat && cp ./{app,dist}/start.sh",
      "osx-copy": "cp -r ./vendor/nw-osx.app ./dist/app/ && cp ./dist/app/app.nw ./dist/app/nw-osx.app/Contents/Resources/app.nw",
      "zip": "(find node_modules src app | zip dist/app/app.nw -@) && zip dist/app/app.nw *.js *.json *.html *.css",
      "osx": "open dist/app/app.nw --args $(pwd)/dist/app/app.nw $(pwd)/dist/data",
      "lite": "POLL=60000 node app/server.js",
      "stylus": "stylus -o . src/styl/main.styl"
    }
}

What is Grunt?

Self-described task runner.

You define tasks that you want to automate.

Use the command line tool to run those tasks.

grunt watch
grunt compass:dev
grunt browserify:dev
grunt dev
grunt test
grunt publish

Installing

http://gruntjs.com has an excellent guide on the specifics of how to install.

Using Grunt

• Make a file Gruntfile.js (or .coffee) in your package root.
• Add a package.json if you haven't already.
• npm install grunt --save-dev
• Add the following code to your gruntfile:

module.exports = function(grunt) {
    grunt.initConfig({})
    
    grunt.registerTask('my-first-task', function() {
        console.log('Hello, world!')
    })
}

$ grunt my-first-task

Hello, world!

Using Grunt continued

module.exports = function(grunt) {
    grunt.initConfig({
        jade: {
            compile: {
                files: {
                    'index.html': 'index.jade'
                }
            }
        }
    })
    
    grunt.loadNpmTasks('grunt-contrib-jade');
}

$ grunt jade:compile