Using Bower & Grunt

readme.md

I'm creating a new template on Joomla 1.5, but I want it to be responsive and use bootstrap. Because I want to use Bootstrap's source LESS files and keep all my code organized I've decided to use Bower. Bower installs all of it's modules in it's own name-spaced directory bower_components.

In short: grunt is a bit of a 'task manager' which has a CLI interface, and bower is a package / dependancy manager a lot like composer.

I followed a part of this guide:

http://blog.elenakolevska.com/using-grunt-with-laravel-and-bootstrap/

The most useful part for me was creating the bower.json file. Mine ended up looking like the one attached.

Now I have a directory structure that looks like this:

root
-bower_components
--bootstrap
--html5shiv
--jquery
-templates
--companytmpl

So the only issue with this is that all our "source" files are in the bower_components directory. Not very useful for building a Joomla template. So this is where Grunt comes in. Along with a bunch of other stuff, Grunt will compile LESS, and put all my JS together for me. My Gruntfile.js ended up being like the one attached.

The end result of putting all this together is that running grunt less will compile my css by checking my template's main template.less file. That file imports from the bower_components directory. In addition to that I have grunt 'watching' my LESS files so any time I make a change it automagically recompiles the LESS for me.

The javascript part is cool too. Since I need bootstrap.js in my template and not in bower_components, using the concat command I merge both jquery, bootstrap, the html5shiv, and my own main.js (just general JS functions) all together, and then send them to my template's directory. I have grunt watching the JS too so that gets compiled, and optionally minified.

All of this is essentially a way to replicate having stuff I would normally have in Joomla 3. Bootstrap, LESS, html5shiv, and jQuery. But the grunt stuff is really cool.

Archiver:

In addition to these key-stroke savers, I also (easily!) built a compressor function in Grunt, so generating an installable joomla package is easy too. If I were building a component, this would be great because i could pull files from all over a Joomla file system (components/com_mycom, administrator/components/com_mycom, modules/mod_mymod, etc...) all into a nice build.

My conclusion is that Grunt freaking rocks, it's way easier to use (for me) than Phing. Grunt also supports doing things like phpunit, jshint, etc.. All that's way outside my needs, but it's there!

bower.json

{
  "name": "companytmpl",
  "version": "0.0.0",
  "authors": [
    "Chad Windnagle <drmmr763@gmail.com>"
  ],
  "description": "Company template",
  "main": "templates/mytemplate/index.php",
  "license": "gpl",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.0.3", // note since bootstrap requires jQuery you will get jQuery too
    "html5shiv": "3.7.0"
  }
}

Gruntfile.js

//Gruntfile
module.exports = function(grunt) {
    //Initializing the configuration object
    grunt.initConfig({
        less: {
            development: {
                options: {
                    compress: true
                },
                files: {
                    "templates/companytmpl/css/template.css":"templates/companytmpl/less/template.less"
                }
            }
        },
        watch: {
            js_frontend: {
                files: [
                    'bower_components/jquery/jquery.js',
                    'bower_components/companytmpl/dist/js/bootstrap.js',
                    'templates/companytmpl/js/main.js'
                ],
                tasks: ['concat']
            },
            less: {
                files: ['templates/companytmpl/less/*.less'],  //watched files
                tasks: ['less'],                          //tasks to run
                options: {
                    // livereload: true                        //reloads the browser
                }
            }
        },
        concat: {
            options: {
                separator: ';'
            },
            js_frontend: {
                src: [
                    'bower_components/jquery/jquery.js',
                    'bower_components/bootstrap/dist/js/bootstrap.js',
                    'bower_components/html5shiv/dist/html5shiv.js',
                    'templates/companytmpl/js/main.js'
                ],
                dest: 'templates/companytmpl/js/frontend.js'
            }
        },
        compress: {
            main: {
                options: {
                    archive: 'companytmpl.zip'
                },
                files: [
                    {expand: true, cwd: 'templates/companytmpl/', src: ['**'], dest: 'companytmpl/'}
                ]
            }
        }
    });
    // Plugin loading
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-compress');

    // Task definition
    grunt.registerTask('default', ['watch']);
};