browserSync не работает в gulpfile
я новичок в node.js и gulp.
Я пытаюсь получить browserSync, работающий с php, и посмотреть файлы scss, чтобы скомпилировать их автоматически.
Вот мой глоток.
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]);
});
При запуске глотка ошибки нет.
Компиляция тоже работает. Но я должен обновить браузер.
Не знаю, что я делаю не так.
Можете ли вы сказать мне, что не так?
Привет, ксола
Решение
Я думаю, что вам нужно иметь 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
Другие решения
Спасибо за подсказки.
Я понял, что наблюдатель смотрит только HTML-файлы. Но я всегда редактировал php файлы.
Также я переместил всех наблюдателей в задание по умолчанию.
Итак, это мой рабочий gulpfile для синхронизации браузера, php и наблюдателей:
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']);
});