如何在我的 Node.js 项目中自动执行编译 Twitter Bootstrap 的任务？
我正在编辑 LESS 文件，这些文件编译成我的 Node.js 项目的 Bootstrap 自定义版本，所以我不能只使用在线定制器或预编译的 JavaScript/CSS 发行版。
如何使用Grunt或Bower之类的东西来自动化构建和编译Twitter Bootstrap前端框架的过程？
是否有用于前端库和框架的包管理器？
我正在使用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']);
}
我只是在开始工作之前输入咕噜声。它运行一个观察程序，并在发生更改后编译我的较少文件。
编辑：还有 https://github.com/emberfeather/less.js-middleware，但您需要将编译添加到应用的流中。这意味着您将在运行 nodejs 进程期间编译较少的文件。这只会发生一次，如果您在某些文件中进行更改，您将看不到结果。当然，您可能希望根据每个请求进行编译，但这会降低应用程序的性能。因此，您最终将获得某种观察者和编译器。正是咕噜在做什么。如果你不想每次都运行grunt，你可以把它添加到你的引导脚本（或在Windows下启动的东西）。
根据您的安排，您可能只想研究较少的中间件。 它会在开发中动态地将 LESS 编译为 CSS，并且在生产环境中会在第一次请求 CSS 时执行此操作，然后提供 CSS 而不是每次都重新编译它。 随附的链接中提供了大量配置示例。
我手头没有 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
}
咕噜咕噜.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以完成您的任务。 享受