Gulp 使用 @import 监视和编译更少的文件

Posted 2023-02-22

【中文标题】Gulp 使用 @import 监视和编译更少的文件

【英文标题】：Gulp watch and compile less files with @import

【发布时间】：2014-07-20 03:58:01

【问题描述】：

我正试图用 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') 中不指定主文件名，但随后所有较少的文件都单独编译。

谢谢

【问题讨论】：

重复：***.com/questions/21025995/… 虽然它使用的是旧式的 gulp.run()

【参考方案1】：

现在您正在打开单个 gulp.src 文件，并观看 After you open the file with gulp。 下面将 watch 和 src 分成两个任务，允许单独的 file 和 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 应该被正确“包含”，如果没有检查导入设置。

【讨论】：

太棒了！感谢您的任务分解:)

我回来了。我正在处理的文件都在同一个文件夹./ 中。我现在正在处理./overrides/ 文件夹中的文件。当我更改此文件夹中的文件时，gulp 不再检测到更改。它适用于根级别，但不适用于嵌套导入。这不是paths: ['./','./overrides/'] 应该提供的帮助吗？

是否可以将具体被监视的文件路径传入“less”任务，根据传入的路径选择“style.less”文件？

【参考方案2】：

您可以对此使用gulp-watch-less。

【讨论】：

这个包已经死了！