browserSync.reload не выполняет с использованием задачи Gulp

Question

Я изо всех сил пытаюсь решить задачу Gulp. Я не мог понять, как заставить его работать.

Позвольте мне показать первую свою структуру проекта:

project/ 
| 
|-- Gulp/ 
| |-- Base/ 
|  |-- start-server.js 
|  |-- sass.js 
|   ... 
| |-- Watch/ 
|  |-- watch-sass.js 
|   ... 
| |-- config.js 
|  ... 
|-- 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 
}); 

Глоток/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' 
    }, 
    // ... 
    } 
}; 

Глоток/Base/авто-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 
    }); 
}); 

Глоток/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 
    })); 
}); 

Глоток/Часы/часы-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]); 
}); 

ПРОБЛЕМА ОПИСАНИЕ:

В последнем файле Глоток/Часы/сторожевые sass.js функция browserSync.reload не делает Работа. задача «watch-sass ',' start-server ', а затем' sass 'работает, он работает без проблем. Однако не обновляет страницу с помощью browserSync.reload после завершения компиляции * .scss-файлов, и я не могу понять, почему. Кто-нибудь может мне помочь?

Answer 1

Я немного новичок в глотании, но похоже, что у вас нет установленного или импортированного gulp-watch. Установите/импортируйте его.

var watch = require("gulp-watch"); 

Затем замените gulp.watch с часами:

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['auto-reload'], function() { 
    watch(config.paths.Sass.all, ['sass'], function() { 
     browserSync.reload(); 
    }); 
}); 

Если не выше, может быть, вы могли бы сравнить свой код моим глотком файлов, найденных здесь: https://github.com/FunkSoulNinja/travel-site

Answer 2

я узнал, что если Я поставил задачу gulp 'start-server' in 'watch-sass.js' файл вместо того, чтобы отделять его от собственного файла, он работает.

Код для сторожевых 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 
    ); 
    }); 
}); 

функция browserSync.reload работы. По крайней мере, в этом методе. Хотя я хотел иметь задачу «start-server» в отдельном файле, и я не знаю, как это сделать.

Итак, на основе этого метода я хотел сделать что-то подобное для файлов JS. Я назвал задачу и файл 'watch-js.js'. Код почти полностью идентичен, только разные пути и задачи конфигурации в runSequence. сторожевого 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 здесь идет сюрприз. Выполняя эту задачу, используя тот же метод, функция browserSync.reload НЕ выполняется! Я исключил его, чтобы он работал так же, как в watch-sass, где он работает. Я действительно потерялся сейчас, кто-нибудь более опытный может помочь мне, что я ошибаюсь?