How do I automate the task of compiling front-end frameworks like Twitter Bootstrap in my Node.js project?

Question

How do I automate the task of compiling Twitter Bootstrap in my Node.js project?

I'm editing the LESS files that compile into a custom build of Bootstrap for my Node.js project, so I can't just use the online customizer or the pre-compiled JavaScript/CSS distribution.

How do I use something like Grunt or Bower to automate the process of building and compiling the Twitter Bootstrap front-end framework into my project from source?

Is there a package manager for front-end libraries and frameworks?

Answer 1

I'm using Grunt to compile my LESS. Here are the dependencies which you have to add to your package.json:

"devDependencies": {
    "grunt": "0.4.1",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-watch": "0.4.4",
    "assemble-less": "0.4.8"
}

And here is how my Gruntfile.js looks like:

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            project: {
                options: {
                    paths: ['src/css/less'],
                    yuicompress: true
                },
                src: ['src/css/less/index.less'],               
                dest: 'src/css/styles.css'
            }
        },
        watch: {
            css: {
                files: ['src/css/less/**/*.less'],
                tasks: ['less']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('assemble-less');

    // grunt.registerTask('default', ['concat', 'less']);
    grunt.registerTask('default', ['less', 'watch']);

}

And I simply type grunt before to start working. It run a watcher and compiles my less files once something changes.

Edit: There is also https://github.com/emberfeather/less.js-middleware but you need to add the compilation to the app's flow. This means that you will compile the less files during the run of the nodejs process. This will happen only once and if you make changes in some of the files you will not see the result. Of course you may want to compile on every request, but this will decrease the performance of your app. So, you will end up with some kind of a watcher and compiler. Exactly what Grunt is doing. If you don't want to run grunt every time you may add it to your boot scripts (or startup things under windows).