Question

我是node.js和gulp的新手。我试图让phpSync使用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

Answer 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

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

browserSync无法在gulpfile中运行

2 个答案: