問題描述

我正試圖用 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.

這篇關于Gulp 使用 @import 監視和編譯更少的文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！