@Scalletta

Как не делать перезагрузку каждой страницы в Gulp?

Вот мой gulpfile.js
var gulp       = require('gulp'),
	sass         = require('gulp-sass'),
	browserSync  = require('browser-sync'),
	concat       = require('gulp-concat'),
	uglify       = require('gulp-uglifyjs'),
	cssnano      = require('gulp-cssnano'),
	rename       = require('gulp-rename'),
	concatCss 	 = require('gulp-concat-css'),
	cache        = require('gulp-cache'),
	autoprefixer = require('gulp-autoprefixer'),
	jade				 = require('gulp-jade');


gulp.task('sass', function(){
	return gulp.src('app/sass/**/*.+(scss|sass)')
		.pipe(sass())
		.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8'], { cascade: true }))
		.pipe(gulp.dest('app/css'))
		.pipe(browserSync.reload({stream: true}))
});



gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: 'app'
		},
		notify: false
	});
});

gulp.task('scripts', function() {
	return gulp.src([
		'app/libs/**/**/*.js',
		])
		.pipe(concat('libs.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('app/js'));
});


gulp.task('jade', function() {
	gulp.src('app/jade/pages/**/*.jade')
		.pipe(jade({
			pretty: '  ',
		}))
		.pipe(gulp.dest('app/'));
	gulp.src('app/jade/**/*.jade')
		.pipe(browserSync.stream())
});

gulp.task('watch', ['browser-sync', 'sasslibs', 'scripts'], function() {
	gulp.watch('app/sass/**/*.+(scss|sass)', ['sass']);
	gulp.watch('app/jade/**/*.jade', ['jade']);
	gulp.watch('app/*.html', browserSync.reload);
	gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('default', ['watch']);


Всё отлично работает, но столкнулся с таким моментом:
в общем когда многостраничник, я нахожу одинаковые блоки и выношу в отдельные стили
scss
>blocks //тут блоки
>tools //Переменные, миксины, шрифты и т.п.
>pages //Страницы (если некоторые уникальны
main.scss //Сюда всё собирается
Тоже самое с jade

Настал тот момент когда страниц было около 40.
Меняю например сайтбар который есть почти на каждой странице и всё начинает компилить, в итоге приходится каждое изменение jade ждать пока скомпилит, с scss всё норм.

возможно ли как то настроить browserSync.reload что бы обновлял страницу после того как все файлы прошли изменения, а не каждую страницу?
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
@Scalletta Автор вопроса
Ответ от Сергей delphinpro
gulp.watch('app/*.html', browserSync.reload);

Вы отслеживаете изменения в билде, так не делают!

Следить нужно за исходниками!
Изменился jade-файл — запустили таск с компиляцией страниц, в конце таска вызвали перезагрузку в браузер-синке.
Создавать инстанс browser-sync именованным

const bs = require('browser-sync');
bs.create('delphinpro');

В задаче получать инстанс по имени

bsInstance = bs.get('delphinpro');

В задаче по окончании вызывать релоад
.pipe(gulp.dest(build))
.on('end', function() {
bsInstance.reload();
});

Для стилей поддерживается горячая замена (без обновления страницы), если вызывать не reload(), a stream()
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы