Как синхронировать изменения в импортируемых less файлах с главным less файлом при сборке Gulp?

Question

[Константин Капельников]

Всем привет!

Есть главный style.less который компилится в style.css, все это на лету отображается в браузере с помощью Browser-Sync. Я подключил к style.less несколько импортов из других less файлов. Как мне сделать, чтобы изменения в них налету также отображались при верстке?

Answer 1

[Алексей Ярков]

Очевидно, что добавить их в отслеживаемые пути

Comments

[Константин Капельников]

Ну это понятно ) Не понимаю как конкретно это сделать. Я передал в вотчер папку с импортами и подключил Browser-Sync, но он обновляет только при изменении в самих импортах, а как сделать чтобы еще и главного файла...

[Алексей Ярков]

Константин Капельников, может проще показать код? Ну зачем мы гадаем?

[Константин Капельников]

Да, сорри...

var gulp = require ("gulp");
var less = require("gulp-less");
var browserSync = require('browser-sync').create();

let config = {
src: "./src",
css: {
src: "/precss/**/*.less",
dest: "/css"
},

less: {
src: "/blocks/**/*.less",
},

html: {
src: "/**/*.html"
}
};

gulp.task("less-import", function() {
gulp.src(config.src + config.less.src)

.pipe(less())


.pipe(gulp.dest(config.src + config.css.src))
.pipe(browserSync.reload({
stream: true
}));
});

gulp.task("build", function() {
gulp.src(config.src + config.css.src)

.pipe(less())


.pipe(gulp.dest(config.src + config.css.dest))
.pipe(browserSync.reload({
stream: true
}));
});

gulp.task('watch', ['browserSync'], function(){
gulp.watch(config.src + config.css.src, ['build']);
gulp.watch(config.src + config.less.src, browserSync.reload);
gulp.watch(config.src + config.html.src, browserSync.reload);
});

gulp.task('browserSync', function(){
browserSync.init({
server: {
baseDir: config.src
},

notify: false // убирает выскакивающее окошко уведомлений

});
});

[Алексей Ярков]

Константин Капельников, пожалуйста, оберните портянку тегом

[Константин Капельников]

var gulp = require ("gulp");
var less = require("gulp-less");
var browserSync = require('browser-sync').create();

let config = {
	src: "./src",
	css: {
		src: "/precss/**/*.less",
		dest: "/css"
	},

	html: {
		src: "/**/*.html"
	}
};


gulp.task("build", function() {
	gulp.src(config.src + config.css.src)

		.pipe(less())
		
		
		.pipe(gulp.dest(config.src + config.css.dest))
		.pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('watch', ['browserSync'], function(){
    gulp.watch(config.src + config.css.src, ['build']);
    gulp.watch(config.src + config.html.src, browserSync.reload);
});

gulp.task('browserSync', function(){
    browserSync.init({
        server: {
            baseDir: config.src
        },
        
        notify: false // убирает выскакивающее окошко уведомлений
        	
    });
});

[Алексей Ярков]

Константин Капельников,

Я подключил к style.less несколько импортов из других less файлов

А они в какой папке лежат?

[Константин Капельников]

src/blocks
Ну как бы какой именно путь не суть важно, мне главное принцип понять.

[Алексей Ярков]

Константин Капельников, ну так вам и надо пути к этим файлам добавить в watch.
Просто gulp же смотрит за главным файлом, куда подключены изменяемые файлы, но сам главный не меняется.
Так что добавьте папку src/blocks

gulp.task('watch', ['browserSync'], function(){
    gulp.watch([config.src + '/blocks/**/*.less', config.src + config.css.src], ['build']);
    gulp.watch(config.src + config.html.src, browserSync.reload);
});

[Константин Капельников]

Алексей Ярков, Алексей, спасибо! Все заработало.