Блог

Главная - Вопросы по программированию - BrowserSync.reload не выполняется с помощью задачи Gulp

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

#javascript #gulp #gulp-watch #browser-sync #gulp-browser-sync

#javascript #gulp #gulp-смотреть #браузер-синхронизация #gulp-browser-sync

Вопрос:

Я много часов борюсь с проблемой в задаче 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
});

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

 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

 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

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

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

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


Ответ №1:

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

Код для 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
    );
  });
});

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

Итак, основываясь на этом методе, я хотел сделать что-то подобное для файлов JS. Я назвал задачу и файл ‘watch-js.js «. Код практически полностью одинаков, просто разные пути конфигурации и задачи в runSequence. 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
    );
  });
});

Ааа И здесь наступает сюрприз. Запуск этой задачи, используя тот же метод, функция BrowserSync.reload НЕ выполняется! Я исключил его для работы так же, как в watch-sass, где он работает. Я действительно потерялся, кто-нибудь более опытный может помочь мне, что я делаю не так?

Ответ №2:

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

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

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

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

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

Комментарии:

1. Это не так. Функция watch находится в ядре Gulp, поэтому вам не нужно требовать ничего, кроме gulp, только для этого. Кроме того, часы уже работают без проблем, как объяснено, единственное, что не работает, — это автоматическая перезагрузка страницы после компиляции файлов Sass.

2. Хм. Я полагаю, что я пишу свои файлы gulp по-другому. Разве массив, в котором у вас есть [‘sass’, BrowserSync], не предназначен только для зависимостей задач gulp? Или это какой-то ярлык? (Я говорю о том, где вы размещаете BrowserSync.reload).

3. BrowserSync.reload является одной из зависимостей задачи gulp. Использование этих задач в массиве позволяет запускать все эти задачи одновременно. По крайней мере, из того, что я узнал до сих пор.

Метки: