Gulp смотрите и компилируйте меньше файлов с помощью @import

Я пытаюсь разобраться с 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'), но тогда все меньшие файлы компилируются отдельно.

Спасибо


javascript gulp livereload gulp-less
person Yannick Schall    schedule 30.05.2014    source источник
comment
Дубликат: stackoverflow.com/questions/21025995/ Хотя он использует старый стиль gulp.run()   -  person SteveLacy    schedule 30.05.2014

Ответы (2)


arrow_upward
25
arrow_downward

Прямо сейчас вы открываете один файл gulp.src и смотрите, как после того, как вы откроете файл с помощью gulp. Следующее разделит наблюдение и src на две задачи, что позволит просматривать отдельные файлы и 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 должен быть «включен» правильно, если нет, проверьте настройки импорта.

person SteveLacy    schedule 30.05.2014
comment
Потрясающие! Спасибо за разбивку задачи :) - person Yannick Schall; 30.05.2014
comment
Я вернулся. Файлы, над которыми я работал, находились в одной папке ./. Сейчас я работаю с файлами в папке ./overrides/. Когда я меняю файлы в этой папке, gulp больше не обнаруживает изменений. Он работает на корневом уровне, но не для вложенного импорта. Разве не в этом должен помочь paths: ['./','./overrides/']? - person Yannick Schall; 03.06.2014
comment
Можно ли передать конкретный просматриваемый путь к файлу в задачу less и выбрать файл style.less на основе входящего пути? - person lkraav; 05.01.2015

arrow_upward
1
arrow_downward

Для этого вы можете использовать gulp-watch-less.

person Rayron Victor    schedule 28.10.2015
comment
Этот пакет мертв! - person Siddhartha Chowdhury; 10.10.2018