javascript Gulp 使用@import 监视和编译更少的文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23953779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gulp watch and compile less files with @import
提问by Yannick Schall
I'm trying to get my head around gulp to watch and compile a .less project + livereload.
I have a style.less file which use @import.
When i run the gulp task it doesn't seem to understand the imports. When I modify the main less file, gulp compiles the file and refresh the browser but if i modify only an import, the changes are ignored.
我试图让我的头脑围绕 gulp 观看和编译一个 .less 项目 + livereload。我有一个 style.less 文件，它使用@import. 当我运行 gulp 任务时，它似乎不理解导入。当我修改主要的 less 文件时，gulp 编译文件并刷新浏览器，但如果我只修改导入，则更改将被忽略。
Here is my gulpfile.js
这是我的 gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
gulp.task('default', function() {
return gulp.src('./style.less')
.pipe(watch())
.pipe(plumber())
.pipe(less({
paths: ['./', './overrides/']
}))
.pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
.pipe(gulp.dest('./'))
.pipe(livereload());
});
I tried not specifying the main file name in gulp.src('./*.less')but then all of the less files are compiled indvidually.
我尝试不指定主文件名，gulp.src('./*.less')但所有较少的文件都是单独编译的。
Thanks
谢谢
回答by SteveLacy
Right now you are opening the single gulp.srcfile, and watching After you open the file with gulp.
The following will split the watching and src into two tasks, allowing for separate file and src watching.
现在您正在打开单个gulp.src文件，并在使用 gulp 打开文件后观看。下面将把 watch 和 src 分成两个任务，允许单独的文件和 src 监视。
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
gulp.task('less', function() {
return gulp.src('./style.less') // only compile the entry file
.pipe(plumber())
.pipe(less({
paths: ['./', './overrides/']
}))
.pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
.pipe(gulp.dest('./'))
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch('./*.less', ['less']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']); // Default will run the 'entry' watch task
When Any of the files found with *.lessare altered it will then run the task which will compile just the src file.
The @imports should be 'included' correctly, if not check the import settings.
当找到的任何文件*.less被更改时，它将运行仅编译 src 文件的任务。@imports 应该被正确“包含”，如果没有检查导入设置。
回答by Rayron Victor
You can use gulp-watch-lessto this.
你可以使用gulp-watch-less来做到这一点。
