【问题标题】:Gulp - JADE - browserSync not reload automaticallyGulp - JADE - browserSync 不会自动重新加载
【发布时间】:2016-01-02 20:09:15
【问题描述】:

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

哪一个是我的错误,为什么 gulp 不在预览中重新加载我的翡翠或 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);
});

【问题讨论】:

    标签: javascript node.js gulp pug


    【解决方案1】:

    你的参数中没有包含你的 jam 或 sass 函数

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

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

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

    })

    gulp 默认

    【讨论】:

    • 我必须在哪里编写这段代码......在最后一个任务中,在评论中 // browserSync 因为它非常相似,否则我必须创建其他任务
    • 只需将参数添加到浏览器同步功能More info
    • 我创建了一个新项目,现在它可以工作了...添加参数 ['sass', 'jade'] 太...谢谢
    猜你喜欢
    • 1970-01-01
    • 2015-05-05
    • 1970-01-01
    • 2018-11-30
    • 1970-01-01
    • 2019-10-05
    • 2017-08-01
    • 2014-07-28
    • 2016-08-26
    相关资源
    最近更新 更多