gulp-livereload перезагрузить CSS без обновления всей страницы

Я работаю с удаленным сервером, и после любых изменений файла он развертывается на сервере через gulp-sftp. Также я работаю с SASS, и у меня есть задача его скомпилировать.

Скомпилировать задачу

gulp.task('compile_css',function(){
gulp.src('css/**/*.scss')

    .pipe(compass({
        config_file: 'config.rb',
        css: 'css',
        sass: 'css'
    }))

    .pipe(gulp.dest('css'))
    .pipe(sftp(sftp_config));
});

Наблюдатель

gulp.task('watch', function(){
livereload.listen();    
gulp.watch('css/**/*.scss', ['compile_css']);
gulp.watch('css/*.css*').on('change', function(file){
    gulp.src(file.path)
      .pipe(wait(1000))
      .pipe(livereload());
});
});

И теперь, если я изменяю какой-либо файл .scss в первом браузере, обновляю только таблицу стилей без перезагрузки паре (загружаю только новую версию style.css), но затем обновляю всю страницу, и это раздражает. Можете ли вы дать какой-нибудь совет, как этого избежать?

p.s. использование программного обеспечения LiveReload в этом случае работает идеально


sass gulp sftp ftp gulp-livereload
person Alexey Svidentsov    schedule 17.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте выполнить следующее в своей watch задаче.

Обратите внимание, что я не могу протестировать фрагмент прямо сейчас, но я думаю, что он может вам помочь, согласно gulp -livereload docs:

gulp.task('watch', function(){
   livereload.listen();
   gulp.watch('css/**/*.scss', ['compile_css']);
   gulp.watch('css/*.css', function(file){
      livereload.changed(file)
  });
});

Совет. Думали ли вы об использовании вместо него Browsersync?

person iamsisar    schedule 19.01.2016