像 Ashwell 一样，我发现使用导入来确保我的所有 LESS 文件都可以访问他们需要的变量和 mixin 很有用。我还使用带有导入的 LESS 文件来进行捆绑。这有几个优点：
- 我可以利用 LESS 的功能来做复杂的事情，比如覆盖变量值来生成多个主题，或者在另一个 LESS 文件中的每个规则前面添加一个类。
- 不需要 concat 插件。
- 像 Web Essentials for Visual Studio 这样的工具可以提供语法帮助和输出预览，因为每个 LESS 文件都完全能够自行呈现。
如果您想导入变量、mixin 等，但又不想实际输出另一个文件的全部内容，您可以使用：
@import (reference) "_colors.less";
经过几天的努力，我终于能够获得一个增量构建，它可以正确地重建依赖于我更改的 LESS 文件的所有对象。我在这里记录了结果。这是最终的 gulpfile：
/*
* This file defines how our static resources get built.
* From the StaticCommon root folder, call "gulp" to compile all generated
* client-side resources, or call "gulp watch" to keep checking source
* files, and rebuild them whenever they are changed. Call "gulp live" to
* do both (build and watch).
*/
/* Dependency definitions: in order to avoid forcing everyone to have
* node/npm installed on their systems, we are including all of the
* necessary dependencies in the node_modules folder. To install new ones,
* you must install nodejs on your machine, and use the "npm install XXX"
* command. */
var gulp = require('gulp');
var less = require('gulp-less');
var LessPluginCleanCss = require('less-plugin-clean-css'),
cleanCss = new LessPluginCleanCss();
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var cache = require('gulp-cached');
var progeny = require('gulp-progeny');
var filter = require('gulp-filter');
var plumber = require('gulp-plumber');
var debug = require('gulp-debug');
gulp.task('less', function() {
return gulp
// Even though some of our LESS files are just references, and
// aren't built, we need to start by looking at all of them because
// if any of them change, we may need to rebuild other less files.
.src(
['Content/@(Theme|Areas|Css)/**/*.less'],
{ base: 'Content' })
// This makes it so that errors are output to the console rather
// than silently crashing the app.
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
// And this makes it so "watch" can continue after an error.
this.emit('end');
}
}))
// When running in "watch" mode, the contents of these files will
// be kept in an in-memory cache, and after the initial hit, we'll
// only rebuild when file contents change.
.pipe(cache('less'))
// This will build a dependency tree based on any @import
// statements found by the given REGEX. If you change one file,
// we'll rebuild any other files that reference it.
.pipe(progeny({
regexp: /^\s*@import\s*(?:\(\w+\)\s*)?['"]([^'"]+)['"]/
}))
// Now that we've set up the dependency tree, we can filter out
// any files whose
// file names start with an underscore (_)
.pipe(filter(['**/*.less', '!**/_*.less']))
// This will output the name of each LESS file that we're about
// to rebuild.
.pipe(debug({ title: 'LESS' }))
// This starts capturing the line-numbers as we transform these
// files, allowing us to output a source map for each LESS file
// in the final stages.
// Browsers like Chrome can pick up those source maps and show you
// the actual LESS source line that a given rule came from,
// despite the source file's being transformed and minified.
.pipe(sourcemaps.init())
// Run the transformation from LESS to CSS
.pipe(less({
// Minify the CSS to get rid of extra space and most CSS
// comments.
plugins: [cleanCss]
}))
// We need a reliable way to indicate that the file was built
// with gulp, so we can ignore it in Mercurial commits.
// Lots of css libraries get distributed as .min.css files, so
// we don't want to exclude that pattern. Let's try .opt.css
// instead.
.pipe(rename(function(path) {
path.extname = ".opt.css";
}))
// Now that we've captured all of our sourcemap mappings, add
// the source map comment at the bottom of each minified CSS
// file, and output the *.css.map file to the same folder as
// the original file.
.pipe(sourcemaps.write('.'))
// Write all these generated files back to the Content folder.
.pipe(gulp.dest('Content'));
});
// Keep an eye on any LESS files, and if they change then invoke the
// 'less' task.
gulp.task('watch', function() {
return gulp.watch('Content/@(Theme|Areas|Css)/**/*.less', ['less']);
});
// Build things first, then keep a watch on any changed files.
gulp.task('live', ['less', 'watch']);
// This is the task that's run when you run "gulp" without any arguments.
gulp.task('default', ['less']);
我们现在可以简单地运行一次gulp live以构建所有 LESS 文件，然后允许每个后续更改仅构建依赖于已更改文件的那些文件。