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

2022-01-12 00:00:00 javascript gulp livereload gulp-less

我正试图用 gulp 来观察和编译一个 .less 项目 + livereload.我有一个使用 @import 的 style.less 文件.当我运行 gulp 任务时，它似乎不理解导入.当我修改主文件时，gulp 会编译文件并刷新浏览器，但如果我只修改导入，则更改将被忽略.

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.

这是我的 gulpfile.js

Here is my 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') 中不指定主文件名，但是所有的 less 文件都是单独编译的.

I tried not specifying the main file name in gulp.src('./*.less') but then all of the less files are compiled indvidually.

谢谢

推荐答案

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

Right now you are opening the single gulp.src file, 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.

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

When Any of the files found with *.less are 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.

相关文章