задача стилуса компилируется, но не перезагружается в хроме

Недавно что-то пошло не так с моим проектом, и я не знаю, где я ошибаюсь? поэтому нужен свежий взгляд и помощь.

Проблема в том, что когда я запускаю gulp, моя задача стилуса компилируется нормально (я вижу изменения в css) но не перезагружается в Chrome автоматически . У меня есть расширение для Chrome (livepage), и все необходимые плагины были установлены локально с помощью npm.

Я протестировал другой, который почти такой же, и он отлично работает.

вот мой глоток:

var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    jade = require('gulp-jade'),
    plumber = require('gulp-plumber'),  
    watch = require('gulp-watch');
//-  JADE
gulp.task('jade', function(){
    return gulp.src('app/jade/*.jade')
        .pipe(plumber())
        .pipe(jade({pretty:true}))
        .pipe(gulp.dest('build'))
});

//- CSS
gulp.task('css', function(){
    return gulp.src('app/stylus/*.styl')
        .pipe(plumber())
        .pipe(stylus())
        .pipe(gulp.dest('build/css'))
});

//- WATCH
gulp.task('watch', function(){
    gulp.watch('app/stylus/*.styl', ['css']);
    gulp.watch('app/jade/*.jade', ['jade']);
});


//- DEFAULT
gulp.task('default', ['jade', 'css', 'watch']);

json:

{
  "name": "newone",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-jade": "^1.1.0",
    "gulp-plumber": "^1.0.1",
    "gulp-stylus": "^2.0.6",
    "gulp-watch": "^4.3.5"
      }
    }

дерево проекта

newone
  | app
    | jade
        index.jade
    | stylus
        style.styl
  | build
    | css
        style.css
    index.html

так, любой совет? благодарю вас...


person Bogdan    schedule 27.08.2015    source источник
comment
Вероятно, вам нужен еще один модуль для автоматической перезагрузки (live-reload), так как gulp-watch просто перестраивает. В devDependencies нет ничего, что позволяло бы перезагружаться в реальном времени. Вот как мне приходится это делать (хотя я использую Brunch, а не Gulp).   -  person Nuclearman    schedule 27.08.2015
comment
ну, я пробовал с live-reload, но ничего не изменилось. другие проекты отлично работают с (livepage) .это странно   -  person Bogdan    schedule 28.08.2015
comment
Я только что почистил свой хром и переустановил live-reload, теперь он снова работает. в любом случае спасибо за совет.   -  person Bogdan    schedule 28.08.2015
comment
вообще ситуация странная. Когда я добавляю в проект postcss (csswring & autoprefixer) и запускаю gulp, у меня в chrome выводится: Не удалось подключиться к серверу Live-Reload. Пожалуйста, убедитесь, что работает совместимый сервер Live-Reload. Мы рекомендуем quard-livereload, пока Live-Reload не появится на вашей платформе.   -  person Bogdan    schedule 28.08.2015
comment
в моей консоли у меня есть это: Container # eachAtRule is deprecated. Use Container # walkAtRule instead. Container # eachRule is deprecated. Use Container # walkRule instead. Container # eachDecl is deprecated. Use Container # walkDecl instead. Node # semicolon is deprecated. Use Node # raws. semicolon Node # after is deprecated. Use Node # raws.after Container # eachComment is deprecated. Use Cotainer # walkComments insteed. .... со всеми этими часами gulp, компилируется, но не обновляется в chrome...   -  person Bogdan    schedule 28.08.2015
comment
Вы читали и следили за документацией по этому модулю, верно? Этот модуль нуждается в некоторой настройке, чтобы отслеживать изменения. Что касается других проектов, которые отлично работают с livepage, вы можете посмотреть, в чем разница между этими проектами и этим. Возможно, вы найдете там свою проблему.   -  person Nuclearman    schedule 29.08.2015


Ответы (1)


Просто используйте Browser-Sync для перезагрузки в реальном времени, это потрясающе!

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

// Static Server + watching styl/html files
gulp.task('serve', ['stylus'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/stylus/*.styl", ['stylus']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('stylus', function() {
    return gulp.src("app/stylus/*.styl")
        .pipe(stylus())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

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

Удачи!

person Benjamin Gandhi-Shepard    schedule 18.09.2015