Browser-sync. живая перезагрузка

Install

At least one browser and the floccus browser extension.

The following sync methods are available:

  • WebDAV: If you have a WebDAV server at hand, like any version of nextcloud/owncloud, box.com or with any other WebDAV server, commercial or self-hosted.
  • Nextcloud Bookmarks: Nextcloud in particular also sports a dedicated bookmarks app, which allows you to also access your bookmarks via a nice web UI.
  • Local file and more: You can also just sync with a local file, using the companion desktop app LoFloccus. You can then also sync that file to other computers using your favorite file syncing solution, like Dropbox, Syncthing, rsync, etc. You can also create a WebDAV Server on the local machine using Docker in GNU/Linux, check out the project Floccus-WebDavDocker.

Once your server or the LoFloccus app is ready, read on for the browser of your choosing.

Note: It is recommended to not enable native bookmark synchronization built into your browser, as it is known to cause issues.

Note: Please avoid installing the bookmarks_fulltextsearch app in nextcloud as it is known to cause issues with newer versions of the bookmarks app.

Note: If you feel floccus is missing a sync backend and you’d like to chip in, check out the Quick Intro to creating an adapter. I’m happy to accept your pull request! 🙂

Chrome

Alternatively, you can still install it by downloading the Chrome package from the latest release and dropping it into Chrome’s extension page.

Firefox

(Note that AMO has to review all new releases, though, so you might need to wait a bit before you can install the latest release on firefox.)

Ugrading

Updating from v2.x to v3.0

It is recommended to remove all of your bookmarks from your accounts before using the new version, deleting the accounts and then to create them again, in order to prevent unforeseen problems!

Updating from v3.0 to v3.1

When using a WebDAV account, there’s nothing you need to do to benefit from the new order preservation feature. If you are using the nextcloud adapter, it is recommended that you switch to the new nextcloud adapter, which works with the Bookmarks folders feature and also preserves ordering.

Switching from tag-based to folder-based syncing

The first sync method available with floccus syncs folders by creating associated tags on the server, which contain the folder’s path. Since then the Nextcloud Bookmarks app supports folders natively and floccus has a new matching sync method. Here’s how you switch to the new method:

  1. Back up your browser bookmarks
  2. Remove the active floccus account for your nextcloud in all browsers
  3. Remove all bookmarks on nextcloud (there’s an option for that in the settings)
  4. Setup a new floccus sync account with the adapter that says «with folders» (as opposed to «legacy») in one browser
  5. Trigger a sync run to create the bookmarks and folders on the server
  6. Make sure everything is as expected on the server
  7. Setup floccus sync accounts in all other browsers with the «with folders»-adapter
  8. Done.
Permission Explanation
storage Necessary for maintaining a cache and mappings between server and browser bookmarks
alarms Necessary for triggering synchronization in regular intervals
bookmarks Necessary for creating and reading bookmarks
Unlimited web access Necessary for accessing your self-hosted server. This cannot be limited, because everybody’s server has a different URL. Unfortunately, the way webextensions work currently, floccus also gets access to all the data the browser has collected on those websites. However, floccus makes no use of that data and doesn’t in any way collect information about you.

BrowserSync

Альтернативой LiveReload является BrowserSync. Он также отображает изменения в браузере, но содержит гораздо больше возможностей.

Когда вы изменяете код, BrowserSync перезагружает страницу или, если это CSS, вносит в него изменения и страница не обновляется. Это довольно полезно, если ваш сайт не устойчив к обновлению. Предположим, вы совершаете четыре щелчка в одностраничном приложении, тогда при обновлении вы вернётесь к стартовой странице. С LiveReload вам потребуется каждый раз щёлкать четыре раза при внесении изменения. BrowserSync, однако, просто вносит изменения при модификации CSS, так что вам не придётся щёлкать «Назад».

BrowserSync — лучший способ проверить ваш макет в разных браузерах

BrowserSync также синхронизирует между браузерами щелчки, действия с формой и положение прокрутки. Вы можете открыть пару браузеров на настольном компьютере, а другой на iPhone и затем перемещаться по сайту. Ссылки будут открываться во всех браузерах, а когда вы прокрутите страницу вниз, страницы на всех устройствах также прокрутятся вниз (обычно также плавно!). При вводе текста в форме он будет набираться в каждом окне. И это поведение всегда можно отключить при желании.

BrowserSync не требует браузерного плагина

BrowserSync не требует плагина для браузера, потому что он работает с вашими файлами и обслуживается скриптом, который открывает сокет между браузером и сервером. У меня ранее это не вызвало никаких проблем.

Как ни странно, не существует плагина для Gulp, потому что BrowserSync не манипулирует файлами, поэтому он на деле работает самостоятельно. Тем не менее, модуль BrowserSync на npm можно вызвать напрямую из Gulp. Для начала установите его через npm:

Далее следующий gulpfile.js запустит BrowserSync и начнёт следить за некоторыми файлами:

Выполните gulp browser-sync чтобы следить за соответствующими файлами на наличие изменений и запустить сервер, который обслуживает файлы в папке app. Разработчик BrowserSync написал о некоторых других штуках, которые вы можете посмотреть в его хранилище BrowserSync + Gulp.

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.

Usage

  • The accounts panel; After installation the accounts pane will pop up allowing you to create and manage accounts. You will be able to access this pane at all times by clicking the floccus icon in the browser tool bar.
  • Your accounts: You can setup multiple accounts and select a bookmark folder for each, that should be synced with that account. Floccus will keep the bookmarks in sync with the server you selected whenever you add or change them and will also sync periodically to pull the latest changes from the server.
  • Syncing the root folder: If you want to sync all bookmarks in your browser you need to select the topmost untitled folder in the folder picker. (In case you’re wondering: Syncing the root folder across browsers from different vendors is now possible out of the box, because the built-in folder names are now normalized).

The server path: Mapping folders / Profiles

When using the nextcloud Bookmarks adapter, you can specify a ‘server folder’ in your floccus account setup. This is like the target folder of a copy or rsync command. While the local sync folder you have selected from your browser bookmarks will normally end up being synced to the root bookmark path on your server, you can change that to an arbitrary sub-directory, e.g. /Toolbar, with the ‘server folder’ setting. If you are using the WebDAV/XBEL adapter, you can do the same by specifying a specific xbel file in the settings.

This way it is possible to sync Firefox’ ‘Bookmarks Menu’ folder to Chrome, which doesn’t have a Menu folder out of the box: Simply set up a separate account for each of the main folders in firefox, each with a separate server folder, e.g.:

  • Fx ‘/Bookmarks Toolbar’ ‘/Toolbar’
  • Fx ‘/Other Bookmarks’ ‘/Others’
  • Fx ‘/Bookmarks Menu’ ‘/Menu’

Then, in Chrome you can setup the folders as follows:

  • GC ‘/Bookmarks Toolbar’ ‘/Toolbar’
  • GC ‘/Bookmarks Toolbar/Menu’ ‘/Menu’ (You need to create this folder yourself, of course.)
  • GC ‘/Other Bookmarks’ ‘/Others’

Limitations

Note that currently you cannot sync the same folder with multiple nextcloud accounts in order to avoid data corruption. If you sync the root folder with one account and sync a sub folder with a different account, that sub-folder will not be synced with the account connected to the root folder anymore.

Performance

Performance is an aspect that I try to tackle with gradual improvements. The latest development here is the «parallel sync» option that processes multiple branches of the bookmarks tree in parallel. The benchmark results in this case are as follows:

adapter cold initial sync (4000 Bookmarks) warm sync with no changes (4000 Bookmarks)
nextcloud-folders ~7min ~20s
webdav ~4min ~10s

Note: The cold sync performance of the nextcloud-folders adapter depends to an extent on the server’s resources as well, such that the times may vary with your setup.

Troubleshooting

Emojis: MySQL doesn’t support emojis out of the box, so if you’re syncing to nextcloud and getting Error code 500 from nextcloud, check the nextcloud log for SQL errors and proceed as explained in the nextcloud docs if you get charset errors.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию