Gulp - JADE - browserSync不会自动重新加载

时间:2016-01-02 20:09:15

标签: javascript node.js gulp pug

我使用gulp进行创建。我使用浏览器同步来查看我的页面预览。但我无法配置gulp自动重新加载。当我在浏览器中进行更改时,我必须仅使用jade文件手动重新加载。我使用并编译CSS到SCSS,如果自动更改...

哪一个是我的错误,为什么不在预览中重新加载我的玉或html文件?

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var autoprefixer = require('gulp-autoprefixer');
var minimifyCss = require('gulp-minify-css');

// JADE
gulp.task('jade', function() {
    gulp.src('./jade/*.jade')
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest('./'))
});

// SASS
gulp.task('sass', function() {
    gulp.src('./sass/styles.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: true
    }))
    .pipe(minimifyCss({
        keepBreaks: true
    }))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

// browserSync
gulp.task('default', function() {

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

    gulp.watch("./sass/styles.scss", ['sass']);
    gulp.watch("./jade/*.jade", ['jade']);
    gulp.watch("./*.html").on('change', browserSync.reload);
});

1 个答案:

答案 0 :(得分:0)

您没有在参数中包含您的玉或sass功能

  

gulp.task('default',['sass'],['jade'],function(){

     
    

gulp.watch(“./ sass / styles.scss”,['sass']);

         

gulp.watch(“./ jade / * .jade”,['jade']);

  
     

})

gulp default