Добрый вечер! Использую browser-sync + jade в проекте. Когда сохраняешь изменения в файле example.jade, происходит обновление окна браузера, но изменения которые были внесены не появляются, хотя в файле example.html они есть. Если еще раз сохранишь разметку в редакторе(просто сохранение без изменений) или вручную перезагрузишь окно браузера изменения срабатывают. Пробовал использовать gulp-connect, такая же история((((((
Вот таск.
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
gFilter = require('gulp-filter'),
jade = require('gulp-jade'),
mainBowerFiles = require('main-bower-files'),
plumber = require('gulp-plumber'),
// reload = browserSync.reload,
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify');
//Static Server + watching html/scss/js files
gulp.task('serve', function() {
browserSync.init(['*.html', 'jade/*.jade'], {
server: {
baseDir: './',
directory: true
},
ghostMode: {
clicks: true,
forms: true,
scroll: false
},
open: false
// tunnel: true
});
});
// Concat bower_components
gulp.task('concatBowerFiles', function() {
gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js',
'bower_components/fotorama/fotorama.js',
'bower_components/jquery.maskedinput/src/jquery.maskedinput.js',
'bower_components/masonry/dist/masonry.pkgd.min.js',
'bower_components/owl.carousel/dist/owl.carousel.min.js'
])
// .pipe(sourcemaps.init())
.pipe(concat('components.min.js'))
.pipe(uglify())
// .pipe(sourcemaps.write())
.pipe(gulp.dest('Content/NewDesign/javascripts/components'));
});
// Copypast bower_components for development
gulp.task('copypastBowerFiles', function() {
var jsFilter = gFilter('**/*.js');
var cssFilter = gFilter('**/*.css');
var fontFilter = gFilter(['*.eot', '*.woff', '*.svg', '*.ttf']);
var imgFilter = gFilter(['*.jpg', '*.png', '*.gif']);
gulp.src(mainBowerFiles())
.pipe(jsFilter)
.pipe(gulp.dest('Content/NewDesign/javascripts/components'))
.pipe(jsFilter.restore())
.pipe(fontFilter)
.pipe(gulp.dest('Content/NewDesign/fonts'))
.pipe(fontFilter.restore())
.pipe(imgFilter)
.pipe(gulp.dest('Content/NewDesign/images'))
.pipe(imgFilter.restore());
// .pipe(cssFilter)
// .pipe(gulp.dest('Content/NewDesign/stylesheets/components'));
});
// Start bower
gulp.task('bower', ['concatBowerFiles', 'copypastBowerFiles']);
// JS concat
gulp.task('js', function() {
gulp.src([
// 'Content/NewDesign/javascripts/components/components.min.js',
'Content/NewDesign/javascripts/scripts.js'
])
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('Content/NewDesign/javascripts'))
.pipe(browserSync.reload({stream: true}));
});
// Libsass task
gulp.task('sass', function() {
gulp.src('sass/styles.scss')
.pipe(plumber())
// .pipe(sourcemaps.init())
.pipe(sass())
// .pipe(autoprefixer('last 10 versions', 'ie 8', 'ie 9', 'ios 6', 'android 4'))
// .pipe(sourcemaps.write())
.pipe(gulp.dest('Content/NewDesign/stylesheets'))
.pipe(browserSync.reload({stream: true}));
});
// Jade task
gulp.task('jade', function() {
gulp.src('jade/*.jade')
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./'));
});
// Watch task
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['sass']);
gulp.watch('jade/**/*.jade', ['jade']);
// gulp.watch('*.html').on('change', browserSync.reload({stream:true}));
});
// Default task
gulp.task('default', ['serve', 'jade', 'sass', 'watch']);
PS: У меня windows8
PPS:
В общем проблема в том, что при изменении фала *.jade, изменяются все файлы:
[17:52:08] Starting 'jade'...
[17:52:08] Finished 'jade' after 4.31 ms
[BS] File changed: c:\Sites\gulp_projects\example\jade\example.jade
[BS] 5 files changed (example.html, example-2.html, example-3.html, example-4.html, example-5.html)
Мой таск 'jade' не успевает завершиться до таска 'browsersync'. Я вручную пробовал обновлять через несколько сек, все срабатывает.
Пытался сделать вот так: browserSync.init(./*.html' { ..., выдает вот такую хрень:
c:\Sites\gulp_projects\example\node_modules\browser-sync\lib\browser-sync.js:616
bs.io.sockets.emit("browser:reload");
^
TypeError: Cannot read property 'sockets' of undefined
at null._onTimeout (c:\Sites\gulp_projects\example\node_modules\browser-sync\lib\browser-sync.js:616:18)
at Timer.listOnTimeout (timers.js:110:15)
Есть идеи?
Простой
Простой
