browserSync 在 gulpfile 中不起作用答案

【问题标题】：browserSync not working in gulpfilebrowserSync 在 gulpfile 中不起作用
【发布时间】：2018-02-13 09:53:13
【问题描述】：

我是 node.js 和 gulp 的新手。我正在尝试让 browserSync 与 php 一起使用并监视 scss 文件，以自动编译它们。

这是我的 gulpfile。

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

var reload  = browserSync.reload;

gulp.task('php', function() {
    connectPHP.server({ base: "src", port: 8010, hostname:"0.0.0.0", keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
    browserSync.init({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);

gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});



gulp.task('default', ['js','browser-sync','php'], function () {
    gulp.watch(['build/*.php'], [reload]);
});

启动 gulp 时，没有错误。编译也可以。但我必须刷新浏览器。不知道我做错了什么。你能告诉我有什么问题吗？

你好，xola

【问题讨论】：

标签： php node.js gulp browser-sync gulp-connect-php

【解决方案1】：

我认为您还需要在任务中包含 watch 函数。

gulp.task('watcher', function () {
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

你会像这样开始监视任务

gulp watcher

【讨论】：

【解决方案2】：

感谢您的提示。

我意识到观察者只观察 html 文件。但我一直在编辑 php 文件。此外，我将所有观察者移至默认任务。

这是我用于浏览器同步、php 和观察者的工作 gulpfile：

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

//Compile sass into CSS & auto-inject into browsers
//This Task is run by a watcher inside the default task
gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

//Apply and Configure PHP on Port 8010
gulp.task('php', function() {
    connectPHP.server({
        base: "src",
        port: 8010,
        hostname:"0.0.0.0",
        keepalive: true
    });
});

//Apply and configure BrowserSync on Port 8080 to proxy the php instance on Port 8010
gulp.task('browser-sync',['php'], function() {
    browserSync.init({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});

//Move the javascript files into our /src/js folder
gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});


//Default task starts php, browsersync and js copy task and also adds three watchers to reload the browser automatically on Change (and if needed calling sass, which compiles and moves the scss and reloads the browser itself)
gulp.task('default', ['php','browser-sync','js'], function () {
    gulp.watch("src/*.html").on('change', browserSync.reload);
    gulp.watch("src/*.php").on('change', browserSync.reload);
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
});

【讨论】：