手写笔任务编译，但不重新加载在chrome

Question

最近，我的项目出了问题，我不知道我错在哪里?所以需要一个全新的面貌和帮助。

问题是，当我运行gulp我的stylus任务编译良好(我看到css的变化)，但它不会在chrome中自动重新加载。我有chrome扩展(livepage)和所有必要的插件都安装在本地与npm。

我测试了另一个最相同的，工作得很好。

这是我的gulpfile:

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

那么，有什么建议吗?谢谢你…

Answer 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']);

祝你好运!