https://github.com/yuriy-svetlov/gulp-live-reload-bp
This module is for the browser plugin «Live Reload Browser Page» — this is the browser plugin that reloads the browser page in real time.
https://github.com/yuriy-svetlov/gulp-live-reload-bp
Last synced: 4 months ago
JSON representation
This module is for the browser plugin «Live Reload Browser Page» — this is the browser plugin that reloads the browser page in real time.
- Host: GitHub
- URL: https://github.com/yuriy-svetlov/gulp-live-reload-bp
- Owner: Yuriy-Svetlov
- License: mit
- Created: 2021-11-14T05:05:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-23T16:29:19.000Z (over 3 years ago)
- Last Synced: 2025-01-11T13:27:25.688Z (5 months ago)
- Language: JavaScript
- Size: 139 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-live-reload-bp (Live Reload Browser Page)
This module is for the browser plugin «[Live Reload Browser Page](https://live-reload-browser-page.com)» — this is the browser plugin for live reload the browser page during web development.
[live-reload-browser-page.com](https://live-reload-browser-page.com)
You may also want to use (In the Pro version of «Live Reload Browser Page», all these plugins are already built in):
* [Live Alert Browser Page](https://live-alert-browser-page.com)
* [Live HTML Validator](https://live-html-validator.com)
Main plugin and documentation are in [live-reload-bp](https://github.com/Yuriy-Svetlov/live-reload-bp)
## Installs
**Step - 1**
You need to install the browser plugin [Live Reload Browser Page](https://live-reload-browser-page.com), choose the version you need:
* For Google Chrome:
* [Live Reload Browser Page](https://chrome.google.com/webstore/detail/live-reload-browser-page/ohidagfdjacdilgoklcmbjfkmplciemd)
* [Live Reload Browser Page (Pro)](https://chrome.google.com/webstore/detail/live-reload-browser-page/njclcjfoekkdmgdgdfdididdffpkcfgj)
**Step - 2**
```shell
npm i gulp-live-reload-bp --save-dev
```
## How to use
[Example of how to establish a connection to the plugin «**Live Reload Browser Page**»](https://github.com/Yuriy-Svetlov/live-reload-bp/tree/main/documentation/examples/%D1%81onnect_to_server)
```javascript
const
gulp = require('gulp'),
LiveReload = require("gulp-live-reload-bp"),
plumber = require('gulp-plumber'),
gulpSass = require('gulp-sass'),
postcss = require('gulp-postcss'),
cssnano = require('cssnano');
const
cssWatch = 'src/scss/*.scss',
cssSrc = ['src/scss/*.scss'],
cssDest = 'dest/css';
const
liveReload = new LiveReload({
host: '127.0.0.1',
port: '8080'
});
function css() {
return gulp.src(cssSrc)
.pipe(plumber({errorHandler: onError}))
.pipe(gulpSass().on('error', gulpSass.logError))
.pipe(postcss([
cssnano({zindex: false, reduceIdents: false})
]))
.pipe(liveReload.reloadPage())
.pipe(gulp.dest(cssDest));
}
function onError(err){
/* Here can be used:
https://github.com/Yuriy-Svetlov/live-alert-bp
In the Pro version of «Live Reload Browser Page - Pro», all plugins are already built in.
*/
liveReload.setError(); // This usage is optional. You can not use this, if you want your page to reload anyway.
this.emit('end');
}
function watch(){
liveReload.run();
gulp.watch(cssWatch, gulp.series(css));
}
exports.css = css;
exports.watch = watch;
exports.start = gulp.series(css, watch);
```
## Examples:
* [Gulp](https://github.com/Yuriy-Svetlov/gulp-live-reload-bp/tree/main/examples)
## API
* [https://github.com/Yuriy-Svetlov/live-reload-bp](https://github.com/Yuriy-Svetlov/live-reload-bp#api)
## Browser plugin API
[API of browser plugin **Live Reload Browser Page**](https://live-reload-browser-page.com/documentation)