0

我是 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

4

2 回答 2

0

我认为您还需要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
于 2018-02-14T09:05:46.300 回答
0

谢谢你的提示。

我意识到观察者只看 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']);
});
于 2018-02-14T14:48:00.967 回答