問題描述

我正試圖用 gulp 來觀察和編譯一個(gè) .less 項(xiàng)目 + livereload.我有一個(gè)使用 @import 的 style.less 文件.當(dāng)我運(yùn)行 gulp 任務(wù)時(shí)，它似乎不理解導(dǎo)入.當(dāng)我修改主文件時(shí)，gulp 會(huì)編譯文件并刷新瀏覽器，但如果我只修改導(dǎo)入，則更改將被忽略.

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 文件都是單獨(dú)編譯的.

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

謝謝

推薦答案

現(xiàn)在您正在打開單個(gè) gulp.src 文件，并觀看使用 gulp 打開文件后.下面將把 watch 和 src 分成兩個(gè)任務(wù)，允許單獨(dú)的 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

當(dāng)使用 *.less 找到的任何文件被更改時(shí)，它將運(yùn)行僅編譯 src 文件的任務(wù).@imports 應(yīng)該被正確地包含"，如果沒有檢查導(dǎo)入設(shè)置.

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.

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