Gulp — Помогите разобраться с BrowserSync + Gulp


Содержание

Gulp-file-include и BrowserSync не отражают изменения в браузере

Я пытаюсь использовать gulp-file-include для включения некоторых общих разделов, таких как верхний или нижний колонтитул из папки /src/includes , на любые .html-страницы в дереве проектов вместе с BrowserSync для обновления изменений.

Когда я использую команду gulp из командной строки, она без проблем скомпилирует все файлы в папку /dist (надеюсь). Но после того, как я что-то изменил из /src/index.html , он не отражает изменения в браузере или не записывает изменения в /dist/index.html .

Я не могу точно определить, где именно проблема в. Вы можете увидеть проект из этого Git-репо, и вот мой контент gulpfile.js :

1 ответ

Кажется, у меня это работает. В конце задач ‘scripts’ и ‘fileinclude’ я добавил следующее:

, чтобы браузер перезагружался после любых изменений в эти две группы. Я изменил задачу ‘watch’ на:

Edit: для решения следующего вопроса о том, что gulp не может просматривать новые файлы, я внесли некоторые изменения в мой первоначальный ответ. Но вы действительно должны использовать gulp4.0 сейчас IMO. Gulp3.9.x полагался на библиотеку, которая была проблематичной в поиске новых, удаленных или переименованных файлов.

Вам понадобятся еще два плагина:

Плагин gulp-watch лучше отслеживает новые и т. Д. Файлы, но не принимает «задачи» в качестве аргументов, а вместо этого принимает функции в качестве аргументов, поэтому я использовал run-sequence. [Вы можете переписать свои задачи как обычные функции — но тогда вы можете также перейти на gulp4.0].

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Всем доброго времени суток. Есть такой gulpfile.js

Все нормально собирается, только browser-sync не хочет нормально работать, выдает в браузере Cannot GET /. При том в консоли все нормально запущено, и при сохранение страницы пробует перезагрузить страницу и опьять Cannot GET. В чем может быть проблема.

Да и вот еще такая ошибка вылазит, возможно проблема в ней
«gulp watch
(node:3012) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.»

Я ставил отдельно graceful-fs, но gulp почему-то его не видит, и ругается при установке, что версия пакета старая. Не знаю что делать.

Как использовать gulp-load-plugins с Browser-Sync?

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

Для этого я надеялся использовать gulp-load-plugins , но, хотя моя задача выполняется, Browser-Sync не запускается /делай что угодно.

Вот мои раздетые настройки. Не уверен, где я иду не так!

gulpfile.js

scripts.js (Gulp Task)

Вы заметите, что мне требуется Browser-Sync в моем файле scripts.js , но это потому, что я выполняю плагины. Browser-Sync не работал Я где-то читал, что это потому, что Browser-Sync на самом деле не является плагином Gulp.

Так что, хотя я не получаю никаких ошибок и Browser-Sync запускается . с этого момента моя задача сценариев работает, но не запускает часть BrowserSync.

Любая помощь очень ценится!


PS , если это поможет, вот мой файл package.json (обратите внимание, что выше я представляю вам урезанная версия моего gulpfile.js ).

package.json

1 ответ

Для тех, кто интересуется этим или находится в неведении, обратите внимание, что по умолчанию gulp-load-plugins будет работать только с пакетами NPM с префиксом gulp- »

К счастью, вы можете изменить это поведение и передать поиск как вариант:

Живая перезагрузка

Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.

В традиционном процессе вы должны нажать F5 или кнопку Обновить в своём браузере, чтобы попросить его обновить внесённые изменения. Это заставляет вас поочерёдно переключаться между редактором и браузером. Один раз, два, три раза и больше. Вы можете заметить, что эта привычка может оказаться очень утомительной и трудоёмкой.

Цель живой перегрузки — избежать ручной работы. Каждый раз, когда вы нажимаете Ctrl + S или сохраняетесь, ваш браузер будет перезагружаться самостоятельно. Круто!

Существует приложение под названием liveReload, которое вы могли бы использовать в сочетании с плагином Google Chrome, чтобы обеспечить живую перезагрузку. Я попытался заставить его работать как на Linux, так и Windows, но не мог. Поэтому, пожалуйста, простите меня. Одно несомненно, сегодня этот плагин есть с Gulp (gulp-livereload) и вы можете его опробовать.

Я не единственный, у кого не всё хорошо с liveReload. Большинство людей, несомненно, сталкивались со многими трудностями, пытаясь использовать его, так что они создали ему полную замену: gulp-browserSync.

Живая перезагрузка с gulp-browserSync

BrowserSync является вероятно одним из самых полезных плагинов, который хотелось бы иметь разработчику. Он на деле даёт вам возможность запустить сервер, на котором вы можете выполнять свои приложения. Он заботится о перезагрузке ваших HTML/PHP-файлов. У него также есть возможность обновить/внедрить CSS и JavaScript-файлы в HTML и многое другое. С помощью этого плагина вы идёте исключительно вперёд.

Теперь посмотрим, как это работает. Перейдите в папку проекта и установите плагин browser-sync так:

Включите его в файл gulpfile.js:

Функция перезагрузки BrowserSync называется reload() . Давайте вызовем её и сохраним в переменной, просто для понятности.

Обратите внимание, что там, где я использую reload() вы также можете использовать browserSync.reload() .

Задайте переменную paths вроде этого:

Эти файлы мы отслеживаем на любые изменения.

Мы создали задачу для файлов Sass и JavaScript, теперь давайте добавим одну для HTML-файлов.

Всё что делает эта задача — пропускает наш HTML-файл через функцию reload() из browser-sync. Если вы, к примеру, используете jade то могли бы компилировать его до перезагрузки.

Делаем то же самое с нашими существующими задачами:

browser-sync нужно знать расположение файлов, которые мы перезагружаем/синхронизируем и запустить мини-сервер основанный на этом; порт для прослушивания; прокси, если возможно и др. Посмотрите все варианты здесь.

Давайте настроим browser-sync и предоставим ему всю информацию.

Обратите внимание, что если вы не указали точный номер порта, browser-sync будет использовать порт 3000 по умолчанию.

Теперь добавьте эту задачу в задачу watcher:

Цукерберг рекомендует:  Программировавние - помогите решить задачу JS

И, наконец, подретушируем задачу default:


Окончательно файл gulpfile.js должен выглядеть следующим образом:

После этого перейдите в папку проекта, если вы ещё не там, и запустите gulp. Сделайте несколько изменений в HTML или Sass-файле и наблюдайте магию Gulp! Если всё пойдёт хорошо, в консоли у вас должно быть что-то вроде следующего.

Browser-sync и PHP-файлы

Измените файл index.html на index.php и подправьте пути так:

Это предполагает, что вы хотите работать с PHP, а не только с HTML. Перейдите к командной строке, остановите текущий процесс через Ctrl + C , а затем запустите gulp снова.

Gulp выполнит ваше приложение на http://localhost:8080, но вы увидите только это на странице:

Помните, перед выполнением любых инструкций PHP, вам нужен сервер PHP. Так что через эту ошибку Gulp пытается сказать нам, что никакого PHP-сервера не найдено.

Всё, что нам нужно сейчас сделать — это запустить сервер PHP вместе с нашими задачами. Для этого мы используем плагин gulp-connect-php.

Запуск PHP-сервера по требованию с browserSync

Прежде всего, начнём с установки плагина gulp-connect-php, который нам поможет.

Теперь включим его в gulpfile.js:

Добавим задачу php:

Подробнее о настройках gulp-connect-php читайте здесь. Поскольку мы можем установить port , baseDir и другие параметры из настроек PHP-сервера, мы можем модифицировать нашу задачу browserSync и сделать её легче:

Обратите внимание: я создал сервер не из browserSync, а из PHP. Скорее создал прокси для browserSync.

Окончательный файл должен выглядеть следующим образом:

Резюме

Живая перезагрузка — это интересная функция, с которой вы действительно можете наслаждаться Gulp. По-прежнему есть несколько способов написания задач и особенно, когда сочетается browserSync и gulp-connect-php. Я приглашаю вас посмотреть соответствующие сайты ради новых идей.

Browsersync + Gulp.js

There’s no official Browsersync plugin for Gulp, because it’s not needed! You simply require the module, utilise the API and configure it with options. The following are some common use-cases as seen in popular projects such as Google’s web starter kit and many others.

Install ^ TOP

First, you’ll need to install Browsersync & Gulp as development dependencies.

Then, use them within your gulpfile.js :

SASS + CSS Injecting ^ TOP

Streams are supported in Browsersync, so you can call reload at specific points during your tasks and all browsers will be informed of the changes. Because Browsersync only cares about your CSS when it’s finished compiling — make sure you call .stream() after gulp.dest

Ruby SASS & Source Maps ^ TOP

If you use gulp-ruby-sass with the sourcemap: true option, additional .map files will be generated. These files end up being sent down stream and when browserSync.reload() receives them, it will attempt a full page reload (as it will not find any .map files in the DOM).


To fix this problem, use browserSync.stream() as seen in the following example.

Browser Reloading ^ TOP

Sometimes you might just want to reload the page completely (for example, after processing a bunch of JS files), but you want the reload to happen after your tasks. This will be easier in gulp 4.x.x , but for now you can do the following (make sure you return the stream from your tasks to ensure that browserSync.reload() is called at the correct time).

If you are using gulp 4.x.x now, then you can follow this documentation.

Manual Reloading ^ TOP

If the streams support doesn’t suit your needs, you can fire the reload method manually by wrapping it in a task. This example will compile & auto-inject CSS just as before, but when HTML files are changed, the browsers will be reloaded instead.

Gulp для начинающих

Дата публикации: 2015-09-22

От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.

Это далеко не полный список возможностей Gulp. Если постараться, то можно даже создать генератор статических сайтов (я делал!). Так что да, Gulp это очень мощный инструмент. Однако, если вы хотите в нем разобраться, придется потратить время на изучение Gulp.

Именно для этого и написана данная статья. В статье так хорошо расписаны основы, что после нее вы сможете уже сами продолжить изучать этот таск раннер. Прежде чем мы перейдем к подробностям, поговорим о том, почему вы предпочтете Gulp другим схожим инструментам.

Почему Gulp?

Приложения на подобие Gulp относятся к так называемым «таск раннерам», так как они используются для запуска задач по сайтостроению. Два саммых популярных менеджера задач на сегодня это Gulp и Grunt. Но кроме названных, конечно, существуют и другие. Broccoli больше используется для компиляции ресурсов, одна из наиболее распространенных задач в таск раннерах.

Существует уже масса статей по поводу различий между Grunt и Gulp, и почему одно приложение стоит использовать, а другое нет. Brunch по типу задач тоже очень похожа на описанные выше программы, также выполняет такие задачи связанные с сервером или проверкой файлов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Все отличие в том, как вы организуете рабочий процесс в этих программах. Если сравнивать с Grunt, то Gulp намного быстрее и проще настроить, плюс он еще и запускается быстрее. А теперь давайте, собственно, разберемся, как начать работу с Gulp.

Что необходимо настроить

К концу это статьи у вас будет настроенная программа, которая будет способна выполнять описанные в начале статьи задачи:

Компиляция Sass в CSS

Обновление браузера при любом сохранении файлов

Оптимизация всех ресурсов (CSS, JS, шрифты и изображения)

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

Gulp — Помогите разобраться с BrowserSync + Gulp

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач (например, минификации, тестирования, объединения файлов), написанный на языке программирования JavaScript.

Программное обеспечение использует командную строку для запуска задач, определённых в файле Gulpfile.

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.


↓ Содержание статьи ↓
Введение
Установка
Инструкции для Gulp (Gulpfile.js)
Организация файлов
Обработка файлов стилей в SASS
Мониторинг изменений (gulp-watch)
Gulp и PostCSS
Видеоуроки Gulp
Разбор ошибок
did you forget to signal async completion?

Если Вы будете копировать код с этой страницы — имейте в виду, что я ставлю кое-где лишние проблелы — исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

Это основная статья об использовании Gulp. В данный момент Вы можете помимо этой прочитать также статьи:

Установка

Рассмотрим установку с помощью npm. Подразумевается, что nmp Вы уже установили.

О том как установить npm читайте в моей статье Установка npm

О том как установить более старую версию Gulp — Установка архивной версии Gulp

$ npm install gulp-cli —global

updated 7 packages in 7.386s

Проверить версию gulp

CLI version: 2.2.0 Local version: Unknown

Про установку не последней, а какой-то определённой версии Gulp читайте здесь

Теперь нужно перейти в директорию, в которой Вы планируете работать. Я буду делать сайт www.HeiHei.ru поэтому перехожу в директорию

Затем переходим непосредственно к установке gulp в текущий проект

$ npm install gulp —save-dev

Добавив ключ —save-dev мы указали, что теперь сохраняем в ветку dev, так как Gulp это пакет, которым мы будем пользоваться в разработке, но на хостинг выкладывать его не будем, так как на сайте он ничего делать не будет. Вся работа Gulp будет на стороне разработчика.

Посмотрим, как изменился наш файл pacakge.json

Появился раздел devDependencies, в который в будущем я добавлю ещё довольно много пакетов.

Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в родительскую папку node_modules.

Установка более старой версии

Иногда бывает нужно установить не текущую, а более ранню версию Gulp.

Особенно это касается версии 3.9.1 , которая сильно отличается от 4 и выше.

Сделать это можно добавив нужную версию после @

npm install gulp@3.9.1 —save-dev

npm install gulp-cli@1.2.1 —save-dev


Список версий Gulp находится здесь, Gulp-cli — здесь. Нужно открыть вкладку Versions

Если Вы хотите сперва удалить Вашу версию Gulp а уже потом установить другую — сделать это можно командой uninstall

npm uninstall gulp

Gulpfile.js

После установки Gulp нужно в корневой директории проекта (в моём случае — heiheiru) создать файл gulpfile.js в который мы будем записывать инструкции для Gulp.

Первым делом запишем туда

const gulp = require(‘gulp’);

Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)

import gulp from ‘gulp’

Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.

После того как файл gulpfile.js создан можно запустить Gulp

Результатом будет похожее сообщение

[11:22:35] Using gulpfile

[11:22:35] Task never defined: default

[11:22:35] To list available tasks, try running: gulp —tasks

Gulp жалуется на то, что не определно задание по умолчанию — default task

Нужно его определить

default запустится но теперь Gulp пожалуется на непонятное закрытие.

[11:31:44] Using gulpfile

\Desktop\Sites\heihei\gulpfile.js
[11:31:44] Starting ‘default’.
Gulp is running!
[11:31:44] The following tasks did not complete: default
[11:31:44] Did you forget to signal async completion?

Эту ошибку можно устранить несколькими способами. Подробности здесь. Я пользуюсь следующим:

Организация файлов

Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.

Корневая папка носит называние проекта. В моё случае heihei или heiheiru

В этой папке мы инициализируем GIT и npm.

npm создаст папку node_modules и файлы package.json , package-lock.json.


Для GIT мы сами рано или поздно создадим файл gitignore

Так как мы будем пользоваться Gulp появится и файл gulpfile.js

С ростом числа заданий, которые будет выполнять Gulp нам станет неудобно хранить их все в одном файле. В gulpfile.js мы будем только импортировать другие .js файлы по принципу — на каждое задание один файл.

Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим подпапку tasks

Всё, что относится непосредственно к сайту положим в папку heiheiru/app

index.html положим в корень app а .css файлы, картинки и скрипты мы положим в папки heiheiru/app/assets/styles heiheiru/app/assets/images , heiheiru/app/assets/scripts

Так будет выглядить дерево папок в редакоторе Sublime

Примеры использования Gulp

Простой пример — как рекурсивно скопировать папку с помощью Gulp и добавить логи разобран в статье — Как скопировать папку с помощью Gulp

Обработка файлов стилей

При разработке удобно пользоваться метаязыками, например, SASS.

Установим его с помощью npm

npm install gulp-sass —save-dev

Теперь можно объявить переменную sass и пользоваться этим препроцессором

const и let — были введены в JavaScript начиная с ES6 и для современного JavaScript являются более предпочтительным вариантом чем var

gulp-watch

gulp-watch это название плагина для Gulp, который отслеживает изменение файлов. Начиная с четвёртой версии Gulp gulp-watch включен в основной пакет и не требует отдельной установки.

Начнём с простого — делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

// Подтягиваем gulp // gulp-watch можно не подтягивать // — он влючен в Gulp начиная с 4-й версии const gulp = require(‘gulp’); // пишем функцию, выводящую в лог предупреждение function html () < console.log("Кто-то отредактировал index.html!"); >// Пишем функцию, // которая следит за файлом index.html // можно назвать её просто watch, но в образовательных // целях я назову её watchFiles // зачем — будет видно чуть ниже — в exports function watchFiles () < gulp.watch( "./app/assets/index.html", html); >// Чтобы обращаться к нашим функция извне, // например, из GitBash запишем exports // Слева запишем названия видимые извне, // а справа имена наших функций exports.html = html; exports.watch = watchFiles; // — он влючен в Gulp начиная с 4-й версии const gulp = require(‘gulp’); // пишем функцию, выводящую в лог предупреждение function html () < console.log("Кто-то отредактировал index.html!"); >// пишем функцию, которая следит за файлом index.html // можно назвать её просто watch, но в образовательных // целях я назову её watchFiles // зачем — будет видно чуть ниже — в exports function watchFiles () < gulp.watch( "./app/assets/index.html", html); >// Чтобы обращаться к нашим функция извне, // например, из GitBash запишем exports // Слева запишем названия видимые извне, // а справа имена наших функций exports.html = html; exports.watch = watchFiles;

Чтобы запустить мониторинг пишем

[20:12:19] Using gulpfile

\Desktop\Sites\heihei\gulpfile.js
[20:12:19] Starting ‘watch’.

Теперь вносим изменения в файл index.html и сохраняем

[20:14:28] Starting ‘html’.
Кто-то отредактировал index.html!

Как это выглядело в Gulp 3

Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки


Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch( «./app/assets/styles/**/*.css», style);

Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение, пропустит его через sass, соберет все файлы в один.

Зачем нужен SASS:

чтобы пользоваться css переменными. Создать переменную, которую потом вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет изменить значение этой переменной, например, на сайте изменится основной цвет, всё что нам нужно будет сделать — это поменять одну переменную в одном файле.

чтобы делать вложения в стилях (nested css)

чтобы использовать mixins

PostCSS

До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.

Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый

Какой бы пре или пост процессор Вы не выбрали, нужно освоить работу с ним, научиться выполнять простые задачи и переходить к более сложным задачам, таким как Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Подробнее про PostCSS Вы можете прочитать в статье PostCSS.

Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.

Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp

Видеоуроки Gulp

Видео много весят, поэтому я выделил для них отдельную страницу — Видеоуроки Gulp

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

Ошибка при установке gulp. Вы выполняете

$ npm install gulp —save-dev

npm WARN saveError ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm WARN heihei No description
npm WARN heihei No repository field.
npm WARN heihei No README data

npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted <"os":"darwin","arch":"any">(current: <"os":"win32","arch":"x64">)

+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp


Unhandled ‘error’ event

events.js:174 throw er; // Unhandled ‘error’ event
^
CssSyntaxError: postcss-simple-vars: C:\Users\ao\Desktop\Sites\travel-site\app\assets\styles\modules\_large-hero.css:5:2: Undefined variable $aMadeUpVariable2

Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.

Unexpected > Если Вы запустили Gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

at Module.load (internal/modules/cjs/loader.js:653:32)

at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

at Function.Module._load (internal/modules/cjs/loader.js:585:3)

at Module.require (internal/modules/cjs/loader.js:692:17)

at require (internal/modules/cjs/helpers.js:25:18)

at execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)

at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\index.js:201:24)

at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.

Здесь два выхода — разобраться и настроить либо перейти к старому синтаксису с require

D > Причина в том, что начиная с Gulp 4 нужно указывать окончание выполнения асинхронного кода. Третий Gulp при отстутствии такого сигнала просто решил бы, что код синхронный. В четвёртом так не получится.

Эту ошибку можно устранить несколькими способами. Я пользуюсь самым простым — в таске использую не анонимную функцию а называю функцию, например cb (от слова callback), а в конце таска вызваю её без аргументов:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted <"os":"darwin","arch":"any">(current: <"os":"win32","arch":"x64">)

Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.

Error — Task function must be specified

Эту ошибку я разбираю в статье Gulp series

Gulp + браузер-синхронизация Невозможно GET/error

Я изучаю систему сборки front-end в настоящее время gulp, я хочу использовать brower-sync, и проблема заключается в том, что она не бросает ошибку в строку commad, но вместо этого, когда она вызывает браузер, она не будет отображаться мой html файл, и он скажет «Невозможно GET/» в окне браузера. Это мой код gulpfile.js

Я использую windows и git bash, а версия «browser-sync»: «^2.12.5» , так что в чем проблема и попытайтесь объяснить мне, чтобы что-то вышло из него.

Есть ли файл index.html в вашей папке ./public/ ? Если нет, вам нужно указать browserSync, какова стартовая страница. browserSync не показывает индекс каталога без какого-либо плагина.


Вы также можете попытаться использовать public без ведущей точки.

Изменить: Директива конфигурации StartPath, похоже, не работает, используйте index вместо

UPDATE: на самом деле вы можете получить список каталогов с помощью браузераSync. Таким образом, он отобразит список файлов в public , а не ошибку Can not Get

Gulp-file-include и BrowserSync не отражают изменения в браузере

Я пытаюсь использовать gulp-file-include для включения некоторых общих разделов, таких как верхний или нижний колонтитул из папки /src/includes , на любые .html-страницы в дереве проектов вместе с BrowserSync для обновления изменений.

Когда я использую команду gulp из командной строки, она без проблем скомпилирует все файлы в папку /dist (надеюсь). Но после того, как я что-то изменил из /src/index.html , он не отражает изменения в браузере или не записывает изменения в /dist/index.html .

Я не могу точно определить, где именно проблема в. Вы можете увидеть проект из этого Git-репо, и вот мой контент gulpfile.js :

1 ответ

Кажется, у меня это работает. В конце задач ‘scripts’ и ‘fileinclude’ я добавил следующее:

, чтобы браузер перезагружался после любых изменений в эти две группы. Я изменил задачу ‘watch’ на:

Edit: для решения следующего вопроса о том, что gulp не может просматривать новые файлы, я внесли некоторые изменения в мой первоначальный ответ. Но вы действительно должны использовать gulp4.0 сейчас IMO. Gulp3.9.x полагался на библиотеку, которая была проблематичной в поиске новых, удаленных или переименованных файлов.

Вам понадобятся еще два плагина:

Плагин gulp-watch лучше отслеживает новые и т. Д. Файлы, но не принимает «задачи» в качестве аргументов, а вместо этого принимает функции в качестве аргументов, поэтому я использовал run-sequence. [Вы можете переписать свои задачи как обычные функции — но тогда вы можете также перейти на gulp4.0].

Как использовать gulp-load-plugins с Browser-Sync?

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

Для этого я надеялся использовать gulp-load-plugins , но, хотя моя задача выполняется, Browser-Sync не запускается /делай что угодно.

Вот мои раздетые настройки. Не уверен, где я иду не так!

gulpfile.js

scripts.js (Gulp Task)

Вы заметите, что мне требуется Browser-Sync в моем файле scripts.js , но это потому, что я выполняю плагины. Browser-Sync не работал Я где-то читал, что это потому, что Browser-Sync на самом деле не является плагином Gulp.

Так что, хотя я не получаю никаких ошибок и Browser-Sync запускается . с этого момента моя задача сценариев работает, но не запускает часть BrowserSync.

Любая помощь очень ценится!

PS , если это поможет, вот мой файл package.json (обратите внимание, что выше я представляю вам урезанная версия моего gulpfile.js ).

package.json

1 ответ

Для тех, кто интересуется этим или находится в неведении, обратите внимание, что по умолчанию gulp-load-plugins будет работать только с пакетами NPM с префиксом gulp- »

К счастью, вы можете изменить это поведение и передать поиск как вариант:

Цукерберг рекомендует:  Высшее образование - Возможно ли работать без вышки
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих