https://github.com/yuriy-svetlov/gulp-live-alert-bp
This module is for the browser plugin «Live Alert Browser Page» — this is the browser plugin for real-time alert on the browser page during web development.
https://github.com/yuriy-svetlov/gulp-live-alert-bp
Last synced: 3 months ago
JSON representation
This module is for the browser plugin «Live Alert Browser Page» — this is the browser plugin for real-time alert on the browser page during web development.
- Host: GitHub
- URL: https://github.com/yuriy-svetlov/gulp-live-alert-bp
- Owner: Yuriy-Svetlov
- License: mit
- Created: 2021-10-20T07:34:22.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-14T23:20:10.000Z (over 3 years ago)
- Last Synced: 2025-02-25T07:21:26.591Z (4 months ago)
- Language: JavaScript
- Size: 82 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-alert-bp (Live Alert Browser Page)
This module is for the browser plugin «[Live Alert Browser Page](https://live-alert-browser-page.com/)» — this is the browser plugin for real-time alert on the browser page during web development.
[live-alert-browser-page.com](https://live-alert-browser-page.com/)
Base manuals are in [live-alert-bp](https://github.com/Yuriy-Svetlov/live-alert-bp)
## Getting Started
### Installs
**Step - 1**
You need to install the browser plugin [Live Alert Browser Page](https://live-alert-browser-page.com/) if you have not already installed it for:
* [Google Chrome](https://chrome.google.com/webstore/detail/live-alert-browser-page/cjhigcdlmbhfagoidakpmmkgmokhocdl)
**Step - 2**
```shell
npm i gulp-live-alert-bp --save-dev
```
### How to use
Read basic information [live-alert-bp](https://github.com/Yuriy-Svetlov/live-alert-bp)
[Example of how to establish a connection to the plugin «**Live Alert Browser Page**»](https://github.com/Yuriy-Svetlov/live-alert-bp/tree/master/documentation/examples/%D1%81onnect_to_server)
```javascript
const
gulp = require('gulp'),
liveAlertBP = require("gulp-live-alert-bp"),
liveAlertFormatterSass = require("live-alert-bp-formatter-sass"),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
cssnano = require('cssnano');
const
cssWatch = 'src/scss/*.scss',
cssSrc = ['src/scss/*.scss'],
cssDest = 'build/css';
const
liveAlert = new liveAlertBP({host: '127.0.0.1', port: '8080'});
function css() {
return gulp.src(cssSrc)
.pipe(plumber({errorHandler: onError}))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
cssnano({zindex: false, reduceIdents: false})
]))
.pipe(gulp.dest(cssDest))
.pipe(liveAlert.close()) // It is not mandatory (If the web page reloads completely)
.pipe(liveAlert.reloadNotification()); // It is not mandatory (If the web page reloads completely)
}
function onError(err){
if(liveAlert.hasError() === false){
if(err.plugin === 'gulp-sass'){
// Without using a formatter
//liveAlert.open([
// { label: 'File', message: err.file },
// { label: 'Message', message: err.message }
//]);
// Using the formatter
liveAlert.open(
liveAlertFormatterSass(err)
);
}
}
this.emit('end');
}
function watch(){
liveAlert.run();
gulp.watch(cssWatch, gulp.series(css));
}
exports.css = css;
exports.watch = watch;
```
### Examples:
* [usage Sass formatter](https://github.com/Yuriy-Svetlov/gulp-live-alert-bp/tree/master/examples/1)
* [usage Sass and Stylelint formatters](https://github.com/Yuriy-Svetlov/gulp-live-alert-bp/tree/master/examples/2)
* [useful examples](https://github.com/Yuriy-Svetlov/live-alert-bp/blob/master/documentation/examples/gulp/README.md)
for Gulp
## API
* [https://github.com/Yuriy-Svetlov/live-alert-bp](https://github.com/Yuriy-Svetlov/live-alert-bp#api)
## Browser plugin API
[API of browser plugin **Live Alert Browser Page**](https://live-alert-browser-page.com/documentation)