19

我试图让我的头脑围绕 gulp 观看和编译一个 .less 项目 + livereload。我有一个 style.less 文件，它使用@import. 当我运行 gulp 任务时，它似乎不理解导入。当我修改主要的 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')但所有较少的文件都是单独编译的。

谢谢

4

1 回答 1

25

现在您正在打开单个gulp.src文件，并在使用 gulp 打开文件后观看。下面将把 watch 和 src 分成两个任务，允许单独的 file 和 src watch。

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 应该被正确地“包含”，如果没有检查导入设置。

于 2014-05-30T16:53:26.360 回答