如何在我的 Node.js 项目中自动执行编译 Twitter Bootstrap 的任务？
我正在为我的 Node.js 项目编辑编译成 Bootstrap 自定义构建的 LESS 文件，因此我不能只使用在线定制器或预编译的 JavaScript/CSS 分发。
如何使用 Grunt 或 Bower 之类的工具来自动化构建 Twitter Bootstrap 前端框架并将其从源代码编译到我的项目中的过程？
有前端库和框架的包管理器吗？
问问题
2597 次
3 回答
13
我正在使用 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 。一旦发生变化，它就会运行一个观察程序并编译我的 less 文件。
编辑：还有https://github.com/emberfeather/less.js-middleware但您需要将编译添加到应用程序的流程中。这意味着您将在 nodejs 进程运行期间编译较少的文件。这只会发生一次，如果您对某些文件进行更改，您将看不到结果。当然，您可能希望针对每个请求进行编译，但这会降低您的应用程序的性能。所以，你最终会得到某种观察者和编译器。正是 Grunt 正在做的事情。如果您不想每次都运行grunt ，您可以将其添加到您的启动脚本（或 windows 下的启动项）中。
于 2013-09-10T21:07:39.727 回答
2
根据您的安排，您可能只想查看less-middleware。它会在开发中即时将您的 LESS 编译成 CSS，而在生产中会在第一次请求 CSS 时执行此操作，然后提供 CSS 而不是每次都重新编译它。包含的链接中有大量配置示例。
于 2013-09-18T02:58:54.127 回答
0
我手头没有 grunt-bootstrap 的设置，并且 npmjs 由于某种原因现在处于脱机状态，请尝试此链接以获取设置https://npmjs.org/package/grunt-bootstrap
我像这样使用最新版本的 grunt-bootstrap 和 grunt-contrib-less；
包.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 更少：条目
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'
]);
};
编辑：我再次发现了这个，https://github.com/jgallen23/grunt-bootstrap 我知道它在某个地方。您可能正在寻找一些引导配置选项，您需要将其添加到 gruntfile.js 以完成您的任务。享受
于 2013-11-28T09:22:35.910 回答