Gulp使用@import观察并编译更少的文件

Question

我正试图让我的头脑一直看着并编译一个无项目+ livereload.我有一个使用的style.less文件@import.当我运行gulp任务时,它似乎不理解导入.当我修改main less文件时,gulp编译文件并刷新浏览器,但如果我只修改导入,则忽略更改.

这是我的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());
});

我尝试不指定主文件名,gulp.src('./*.less')但是所有较少的文件都是单独编译的.

谢谢

Answer 1

现在你打开单个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

当找到的任何文件*.less被更改时,它将运行将仅编译src文件的任务.如果没有检查导入设置,应正确"包含"@imports.