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

Question

如何自动完成在Node.js项目中编译Twitter Bootstrap的任务？

我正在编辑LESS文件,这些文件编译成我的Node.js项目的自定义构建的Bootstrap,因此我不能只使用在线自定义程序或预编译的JavaScript/CSS分发.

我如何使用像Grunt或Bower这样的东西来自动化从源代码构建和编译Twitter Bootstrap前端框架到我的项目中的过程？

是否有前端库和框架的包管理器？

Answer 1

我正在使用Grunt来编译我的LESS.以下是您必须添加到package.json的依赖项:

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

以下是我的Gruntfile.js的样子:

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']);

}

我只是打开grunt才开始工作.它会运行一个观察程序,并在发生变化时编译我的文件.

编辑:还有https://github.com/emberfeather/less.js-middleware,但您需要将编译添加到应用程序的流程中.这意味着您将在nodejs进程运行期间编译较少的文件.这只会发生一次,如果您在某些文件中进行更改,则无法看到结果.当然,您可能希望在每个请求上进行编译,但这会降低应用程序的性能.所以,你最终会得到某种观察者和编译器.正是Grunt正在做的事情.如果你不想每次都将grunt添加到你的启动脚本(或windows下的启动项目)中运行grunt.