Вот мой 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 что бы обновлял страницу после того как все файлы прошли изменения, а не каждую страницу?
