Grunt

Tech Talk @DLabs, d.o.o.

Andrej Čremožnik

Grunt is a Javascript task runner

app/console cache:clear

app/console assets:install --symlink

compass compile -e production

app/console assetic:dump --watch

app/co... w00t?

Why not simply:

$ grunt

What's Grunt?

Nodejs task runner

Can be used to automate repetitive tasks which would usually require a deep understanding of command line.
Back-end developers don't need to know about front end tech like Sass
Likewise front-end devs don't need to understand the services required to run the app
Simplifies front-end testing
...

Grunt plugins

http://gruntjs.com/plugins

As of this day it does all those 2081 things.

Install

1. Nodejs: sudo apt-get install nodejs

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

2. Install Grunt globally:

sudo npm install -g grunt-cli

3. Keep updated

sudo npm update -g

Package.json

Create package.json in your project's root:

{
  "name": "RPS",
  "version": "1.0.0"
}

$ npm install --save-dev grunt grunt-shell

{
  "name": "RPS",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-shell": "~0.6.1"
  }
}

Gruntfile.js

Create Gruntfile.js in your project's root:

module.exports = function(grunt) {
    'use strict';

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        shell: {
            listFiles: {
                options: { stdout: true },
                command: 'ls -la --group-directories-first -F'
            }
        }
    });

    grunt.loadNpmTasks('grunt-shell');

    grunt.registerTask('default', ['shell']);
}

Let's run it

$ grunt

Running "shell:listFiles" (shell) task
total 20
drwxrwxr-x  3 dev users 4096 Jan  6 17:02 ./
drwx------ 14 dev users 4096 Dec 12 15:29 ../
drwxrwxr-x  4 dev users 4096 Jan  6 17:02 node_modules/
-rw-rw-r--  1 dev users  410 Jan  6 17:05 Gruntfile.js
-rw-rw-r--  1 dev users  121 Jan  6 17:02 package.json

Done, without errors.

Starting on a Grunt project

1. In the folder with the package.json run:

 $ npm install

DONE!

But what does Grunt do?

                 # On one of the projects it does this:
grunt            # concatenates javascripts, compiles scss, runs assetic:dump
grunt watch      # watches js and scss for changes, compiles on change, runs assetic:dump
grunt clean      # clears cache, runs compass clean
grunt production # concatenates and uglyfies javascripts, compiles and optimizes css, runs assetic:dump

Always document your Grunt tasks!

Grunt + Symfony + Javascript

1. Concatenate javascript Grunt task:

concat: {
  options: {
    stripBanners: true,
    separator: ';'
  },
  build: {
    files: {
      'web/frontend/app_head.js': [
        'src/Project/Web/WebBundle/Resources/public/js/head_*.js'
      ],
      'web/frontend/app.js': [
        'src/Project/Web/WebBundle/Resources/public/js/*.js'
      ]
    }
  }
}

Grunt + Symfony + Javascript

2. Uglify javascript Grunt task:

uglify: {
  options: {
    preserveComments: false
  },
  headScripts: {
    options: { banner: '/*! List libraries and their licenses here */' },
    files: {
      'web/frontend/app_head.js': ['web/frontend/app_head.js']
    }
  },
  mainScripts: {
    options: { banner: '/*! List libraries and their licenses here */' },
    files: {
      'web/frontend/app.js': ['web/frontend/app.js']
    }
  }
}

Grunt + Symfony + Javascript

3. Reference files in Twig:

{% block head_javascripts %}
  {% javascripts
    'frontend/app_head.js'
  %}
    <script src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

{% block main_javascripts %}
  {% javascripts
    'frontend/app.js'
  %}
    <script src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

Grunt + Symfony + Javascript

4. Symfony assetic:dump Grunt task

shell: {
  assetic: {
    command: 'app/console assetic:dump'
  }
}

Grunt + Symfony + Javascript

5. Chain tasks together:

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

grunt.registerTask('js-prod', ['concat', 'uglify', 'shell:assetic']);

Grunt + Symfony + Javascript

6. Run it

 $ grunt js-prod
Running "concat:build" (concat) task
File "web/frontend/app_head.js" created.
File "web/frontend/app.js" created.

Running "uglify:headScripts" (uglify) task
File "web/frontend/app_head.js" created.

Running "uglify:mainScripts" (uglify) task
File "web/frontend/app.js" created.

Running "shell:assetic" (shell) task

Done, without errors.