我如何在Node.js项目中自动执行编译前端框架（如Twitter Bootstrap）的任务？ [英] How do I automate the task of compiling front-end frameworks like Twitter Bootstrap in my Node.js project?

问题描述

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

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

我编辑LESS文件，编译成Bootstrap的自定义版本对于我的Node.js项目，我不能只使用在线定制器或预编译的JavaScript / CSS发行版。

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.

如何使用Grunt或Bower自动化构建和编译Twitter Bootstrap前端框架到我的项目中的过程？

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?

推荐答案

我使用Grunt来编译我的LESS。下面是你必须添加到你的package.json的依赖关系：

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"
}

这里是我的Gruntfile。 js看起来像：

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

}

我只需输入 grunt 之前开始工作。它运行一个观察器，一旦有变化就编译我的少量文件。

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

编辑：
还有 https://github.com/emberfeather/less.js-middleware ，但您需要将编译添加到应用程序的流程中。这意味着您将在运行nodejs进程期间编译较少的文件。这只会发生一次，如果您对某些文件进行更改，您将看不到结果。当然，您可能需要编译每个请求，但这会降低应用程序的性能。所以，你最终会得到某种观察者和编译器。 Grunt正在做的是什么。如果您不想每次运行 grunt ，都可以将其添加到引导脚本中（或者在Windows下启动）。

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

这篇关于我如何在Node.js项目中自动执行编译前端框架（如Twitter Bootstrap）的任务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！