0

В папке less проекта лежит несколько .less файлов: style.less (это главный рабочий файл), colors.less, fonts.less, mixins.less и другие.

Я подключаю доп. файлы через @import в style.less файл.

@import "colors.less";
@import "fonts.less";
@import "mixins.less";

Это мой gulpfile.js файл

'use strict';

var gulp = require('gulp');
var less = require('gulp-less'); 
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');

function swallowError (error) {

  // If you want details of the error in the console
  console.log(error.toString());

  this.emit('end');
}


/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./src/less/style.less')
    .pipe(less())
    .on('error', swallowError)
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('./prod/css/'));
}); 
/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./src/**/*.less' , ['compile-less']);
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./prod/"
        }
    }); 
    gulp.watch("./src/less/*.less").on("change", reload);
    gulp.watch("./prod/*.html").on("change", reload);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);

(Использовала этот код как пример).

Gulp отлично компилирует style.less файл и сразу перезагружает страницу с изменениями, но когда я пытаюсь изменить любой файл, подключенный через @import, colors.less, например, то Gulp событие изменения отрабатывает, страница перезагружается, но изменения в css файле не отражаются. Чтобы изменения откомпилировались, приходится вручную остановить Gulp и запустить его снова. Что не так?

2 ответа 2

1

Нашли решение? такое же странное поведение less

Как я понял less кеширует подключаемые файлы через include, пробовал удалять кеш, не помогает. Нашел для себя такое решение:

 gulp.task('get:less', function() {
       //массив файлов лесс, которые собираются в один
        return gulp.src(['file1.less', 'file2.less']) 
             //имя исходного лесс файла
            .pipe(concat('main.less'))
             //в какую директорию положить
            .pipe(gulp.dest('./src/less'));
    });



 css в less 

задачка сначала собирает полный файлы less а зетем его компилит тогда остается только повесит watch и выполнять команду less а она будет тянуть get:less

  gulp.task('less', ['get:less'], function () {

        return gulp.src('./src/less/main.less')
            .pipe(less())
            .pipe(autoprefixer())
            .pipe(cssmin())
            .pipe(gulp.dest('./assets/css'))
    });

еще можно посмотреть в сторону пакета gulp include и заменить less @include

0

Вы используете SublimeText ?
Cкорее всего да.
Просто добавьте в настройке строчку "atomic_save": true
Мой подобный топик: Проблема с @import в SCSS

P.S. Сразу встречный вопрос, что делает (для чего нужна) строчка .on('error', swallowError) в вашем Less таске ??

5
  • Нет, я использую Notepad++. Я тут поковырялась, и вроде как пишут, что это проблема gulp-less 4.0.0. github.com/stevelacy/gulp-less/issues/283 Поставила gulp-less 3.5.0., теперь все изменения в импортированных файлах отрабатывает, но перестала работать строка @import (less) "../bootstrap/bootstrap.min.css"; просто вываливается куча css кода в консоль и ничего не отрабатывает prnt.sc/iphjv2, а строку @import (сss) "../bootstrap/bootstrap.min.css"; не видит и тупо ее так же пишет в css файл.Строка .on('error', swallowError) - это выше прописана в коде функция отработки ошибок
    – Heidel
    10 мар 2018 в 23:06
  • Я не юзал less, но по аналогии с Sass, когда нужно импотрировать .css файлы не указывайте разширения. @import (сss) "../bootstrap/bootstrap.min". Авось поможет :) 10 мар 2018 в 23:17
  • Да и попробуйте как-то в вашем Notepad включить это авто сохранения, мне каким-то магическим чудом помогло решить такую же проблему. А что там по поводу строчки в gulpfile ? 10 мар 2018 в 23:22
  • Нет, не указывать расширение не помогло, он его не видит. Строка .on('error', swallowError) - это выше прописана в коде функция отработки ошибок
    – Heidel
    10 мар 2018 в 23:25
  • toster.ru/q/230251, попробуйте с первого ответа. Второй ответ по логике сработает, но выглядит он, как по мне, так себе. Хотя ваша сборка, кроме вас, особо никому не важна :) 10 мар 2018 в 23:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.