[英]browserSync.reload doesn't execute using Gulp task
I am struggling with a problem on Gulp task for plenty hours. 我在Gulp任务上苦苦挣扎了好几个小时。 I couldn't figure out how to make it work.
我不知道如何使它工作。
Let me show first my project structure : 首先让我展示我的项目结构 :
project/
|
|-- Gulp/
| |-- Base/
| |-- start-server.js
| |-- sass.js
| ...
| |-- Watch/
| |-- watch-sass.js
| ...
| |-- config.js
| ...
|-- gulpfile.js
| ...
Also let me show code of each file mentioned in this structure. 另外,让我显示此结构中提到的每个文件的代码。 gulpfile.js
gulpfile.js
/*jslint node: true */
"use strict";
var requireDir = require('require-dir'); // Node module to require whole directories
// ***** Require all tasks from Gulp folder *****
requireDir('./Gulp', {
recurse: true
});
Gulp/ config.js Gulp / config.js
module.exports = {
paths: {
Project: {
dir: './',
src: './www',
dist: './dist'
},
HTML: {
all: './www/Views/**/**/*.html',
dir: './www/Views',
entry: './www/Views/index.html'
},
Sass: {
all: './www/StyleSheets/Sass/**/**/*.scss',
dir: './www/StyleSheets/Sass',
entry: './www/StyleSheets/Sass/main.scss',
map: '../../../dist/maps/sass',
vendor: './www/StyleSheets/Sass/Vendor/**/*.scss'
},
CSS: {
all: './www/StyleSheets/CSS/**/**/*.css',
dir: './www/StyleSheets/CSS',
entry: './www/StyleSheets/CSS/main.css',
map: '../../../dist/maps/css',
vendor: './www/StyleSheets/CSS/Vendor/**/*.css'
},
JS: {
all: './www/JavaScripts/**/**/*.js',
dir: './www/JavaScripts',
entry: './www/JavaScripts/app.js',
map: '../../../dist/maps/js',
vendor: './www/JavaScripts/Vendor/**/*.js'
},
// ...
}
};
Gulp/Base/ auto-reload.js Gulp / Base / auto-reload.js
var gulp = require('gulp'),
config = require('../config');
// ********* IMPORTS *********
var browserSync = require('browser-sync').create();
// ***END*** IMPORTS ***END***
// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
browserSync.init({
server: {
baseDir: config.paths.Project.dir
},
open: true
});
});
Gulp/Base/ sass.js Gulp / Base / sass.js
var gulp = require('gulp'),
config = require('../config');
// ********* IMPORTS *********
var sass = require('gulp-sass'),
browserSync = require('browser-sync'),
notify = require('gulp-notify'),
sourceMaps = require('gulp-sourcemaps');
// ***END*** IMPORTS ***END***
// ***** Sass compiler *****
gulp.task('sass', function () {
return gulp.src(config.paths.Sass.all)
.pipe(sourceMaps.init())
.pipe(sass({
style: 'compressed'
}))
.on("error", notify.onError(function (error) {
return "Error: " + error.message;
}))
.pipe(sourceMaps.write(config.paths.Sass.map))
.pipe(gulp.dest(config.paths.CSS.dir))
.pipe(browserSync.reload({
stream: true
}));
});
Gulp/Watch/ watch-sass.js Gulp / Watch / watch-sass.js
var gulp = require('gulp'),
config = require('../config');
// ********* IMPORTS *********
var browserSync = require('browser-sync'),
runSequence = require('run-sequence');
// ***END*** IMPORTS ***END***
// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
gulp.watch(config.paths.Sass.all, ['sass', browserSync.reload]);
});
PROBLEM DESCRIPTION: 问题描述:
In the last file Gulp/Watch/ watch-sass.js the function browserSync.reload doesn't work.
在最后一个文件Gulp / Watch / watch-sass.js中 ,功能browserSync.reload不起作用。 the task ' watch-sass ', ' start-server ' and then ' sass ' is working, it executes without problems.
任务' watch-sass ',' start-server '和' sass '在工作,它的执行没有问题。 However it doesn't auto-refresh page using browserSync.reload after finishing compiling *.scss files and I cannot figure out why.
但是,在完成* .scss文件编译后,它不会使用browserSync.reload自动刷新页面 ,我无法弄清原因。 Anyone can help me?
有人可以帮助我吗?
I'm a bit new to gulp, but it looks like you don't have gulp-watch installed or imported. 我对gulp有点陌生,但看起来您没有安装或导入gulp-watch。 Install/import it.
安装/导入它。
var watch = require("gulp-watch");
Then replace gulp.watch with watch: 然后将gulp.watch替换为watch:
// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['auto-reload'], function () {
watch(config.paths.Sass.all, ['sass'], function() {
browserSync.reload();
});
});
If not the above, maybe you could compare your code to my gulp files found here: https://github.com/FunkSoulNinja/travel-site 如果不是以上情况,也许您可以将您的代码与我在这里找到的gulp文件进行比较: https : //github.com/FunkSoulNinja/travel-site
I found out that if I put gulp task ' start-server ' in ' watch-sass.js ' file instead of separating it to his own file, it works. 我发现,如果我将gulp任务“ start-server ”放在“ watch-sass.js ”文件中,而不是将其分离到自己的文件中,那么它将起作用。
The code for watch-sass.js looks like this: watch-sass.js的代码如下所示:
var gulp = require('gulp'),
config = require('../config');
// ********* IMPORTS *********
var browserSync = require('browser-sync').create(),
runSequence = require('run-sequence');
// ***END*** IMPORTS ***END***
// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
browserSync.init({
server: {
baseDir: config.paths.Project.dir
},
open: true
});
});
// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
gulp.watch(config.paths.Sass.all, function () {
runSequence(
'sass',
'useref-css',
'move-index',
browserSync.reload
);
});
});
The function browserSync.reload works. 函数browserSync.reload起作用。 At least in this method.
至少在这种方法中。 Although I wanted to have 'start-server' task in separated file and I don't know how to do it.
尽管我想在单独的文件中执行“启动服务器”任务,但我不知道该怎么做。
So, based on this method I wanted to do something similar for JS files. 因此,基于此方法,我想对JS文件执行类似的操作。 I named the task and file ' watch-js.js '.
我将任务命名为文件“ watch-js.js ”。 The code is almost extactly same, just different config paths and tasks in runSequence.
代码几乎完全相同,只是runSequence中的配置路径和任务不同。 watch-js.js
watch-js.js
var gulp = require('gulp'),
config = require('../config');
// ********* IMPORTS *********
var browserSync = require('browser-sync').create(),
runSequence = require('run-sequence');
// ***END*** IMPORTS ***END***
// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
browserSync.init({
server: {
baseDir: config.paths.Project.dir
},
open: true
});
});
// ***** Gulp watch JS files *****
gulp.task('watch-js', ['start-server'], function () {
gulp.watch(config.paths.JS.all, function () {
runSequence(
'useref-js',
'move-index',
browserSync.reload
);
});
});
Aaaand here comes the surprise. Aaaand来了。 Running this task, using same method the function browserSync.reload is NOT being executed !
使用相同的方法运行此任务, 不会执行功能browserSync.reload ! I excepted it to work the same as in watch-sass, where it works.
我除外,它的工作原理与在工作表中的表ass相同。 I'm really lost now, anyone more experienced could help me what wrong I am doing?
我现在真的迷失了,任何有经验的人都可以帮助我,我在做什么错?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.