web-dev-qa-db-ja.com

@importを使用して監視し、少ないファイルをコンパイルする

私は.lessプロジェクト+ livereloadを見てコンパイルするために頭を一杯にしようとしています。 _@import_を使用するstyle.lessファイルがあります。 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')でメインファイル名を指定しないようにしましたが、それ以外のすべてのファイルは個別にコンパイルされます。

ありがとう

javascriptgulplivereloadgulp-less
19
Yannick Schall

現在、単一のgulp.srcファイルを開いており、gulpでファイルを開いた後に監視しています。次の例では、監視とsrcを2つのタスクに分割し、ファイルと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は、インポート設定をチェックしない場合、正しく「含まれる」必要があります。

24
SteveLacy

これには gulp-watch-less を使用できます。

1
Rayron Victor