如何自动完成在我的Node.js项目中编译Twitter Bootstrap等前端框架的任务？

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).

Answer 2

Depending on your arrangement, you may want to just look into less-middleware . It will compile your LESS into CSS on the fly in development, and in production will do it the first time the CSS is requested, and then serve up the CSS instead of recompiling it every time. Plenty of configuration examples at the included link.

Answer 3

I dont have the settings on hand for grunt-bootstrap and npmjs is offline right now for some reason, try this link for the settings https://npmjs.org/package/grunt-bootstrap

im using the latest version of grunt-bootstrap and grunt-contrib-less like this;

package.json

"devDependencies": {
"grunt": "~0.4.2",
"grunt-cli": "~0.1.11",
"grunt-bootstrap": "~0.1.0",
"grunt-contrib-jade": "~0.8.0",
"grunt-contrib-less": "~0.8.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3"
//others here

}

Gruntfile.JS less: entry

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        jshint: {
            options: {
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                boss: true,
                eqnull: true,
                browser: true,
                globals: {
                    require: true,
                    define: true,
                    requirejs: true,
                    describe: true,
                    expect: true,
                    it: true
                },

                // https://leanpub.com/grunt/read #see 'module' is not defined
                node: true
            },
            // https://leanpub.com/grunt/read #see 'module' is not defined
            all: [
                'Gruntfile.js',
                'src/app/*.js',
                'src/config.js',
                'tests/app/*.js'
            ]
        },
        uglify: {
            options: {
                banner: '*//*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> *//*\n'
            },
            build: {
                src: 'src/app/<%= pkg.name %>.js',
                dest: 'build/app/<%= pkg.name %>.min.js'
            }
        },

        // Run jshint any time a file is added
        watch: {
            scripts: {
                files: [
                    'Gruntfile.js',
                    'src/app/*.js',
                    'tests/app/*.js'
                ],
                tasks: ['jshint'],
                options: {
                    /**
                     * If you need to dynamically modify your config, the spawn option must be disabled to keep the watch
                     * running under the same context.
                     */
                    spawn: false
                }
            },
            css: {
                files: ['src/assets/css/*.less'],
                tasks: ['less']
            }
        },
        less: {
            development: {
                options: {
                    paths: ["src/assets/css"],
                    compress: true,
                    report: 'gzip',
                    cleancss: true,
                    ieCompat: true,
                    strictImports: true
                    //dumpLineNumbers
                },
                files: [{
                    expand: true,
                    cwd: "src/assets/css",
                    src:  ['*.less'],
                    dest: 'build/assets/css',
                    ext: '.css'
                }]
            }
            /*
            production: {
                options: {
                    cleancss: true
                },
                files: {
                }

            }*/
        },
        jade: {
            compile: {
                options: {
                    //client: false,
                    pretty: true,
                    data: {
                        debug: false
                    }
                },
                files: [ {
                    cwd: "src/app/views",
                    src: "**/*.jade",
                    dest: "build/templates",
                    expand: true,
                    ext: ".html"
                } ]
            }
        }
    });

    // Load task(s)
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-bootstrap');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Register task(s).
    grunt.registerTask('default', [
            'jshint',
            'uglify',
            'less',
            'jade',
            'bootstrap'
        ]);

    grunt.registerTask('dev', [
            'watch'
    ]);
};

Edit: i found this once again, https://github.com/jgallen23/grunt-bootstrap i knew it was somewhere out there. there is some of your bootstrap config options your probably looking for that you need to add to the gruntfile.js to complete your task.. Enjoy