如何自动完成在我的Node.js项目中编译前端框架（如Twitter Bootstrap）的任务？
我如何自动完成在我的Node.js项目中编译Twitter Bootstrap的任务？
我正在编辑LESS文件，这些文件编译为我的Node.js项目的自定义Bootstrap版本，因此我不能只使用在线定制器或预编译的JavaScript / CSS分发版。
我如何使用Grunt或Bower这样的工具来自动化构build和编译Twitter Bootstrap前端框架到我的项目中的过程？
是否有前端库和框架的包pipe理器？
我正在使用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']); }
而我只需input咕噜声即可开始工作。 它运行一个观察器，一旦有变化，编译我的less文件。
编辑：也有https://github.com/emberfeather/less.js-middleware，但你需要将编译添加到应用程序的stream程。 这意味着您将在运行nodejs进程期间编译较less的文件。 这只会发生一次，如果您在某些文件中进行更改，您将看不到结果。 当然，您可能希望编译每个请求，但这会降低您的应用程序的性能。 所以，你最终会得到某种观察者和编译器。 Grunt正在做什么。 如果你不想在每次你将它添加到你的启动脚本（或者在windows下启动的东西）时运行grunt 。
根据您的安排，您可能只需要查看较less的中间件 。 它将在开发过程中将你的LESS编译成CSS，并且在生产过程中第一次请求CSS，然后提供CSS而不是每次重新编译它。 在包含的链接上有很多configuration示例。
我没有手头设置grunt-bootstrap的设置，npmjs由于某种原因现在处于脱机状态，请尝试此链接进行设置https://npmjs.org/package/grunt-bootstrap
即时通讯使用最新版本的grunt-bootstrap和grunt-contrib-less这样;
的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' ]); };
编辑：我再次find了这个， https://github.com/jgallen23/grunt-bootstrap我知道它在某处。 有一些你的引导configuration选项，你可能正在寻找，你需要添加到gruntfile.js来完成你的任务..享受