Skip to content

3lo1i/gulp-proxy-inject-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gulp-proxy-inject-css

Gulp plugin that allows to open any website on localhost and inject your custom CSS that will be applied to page on each save without page reload, much like live reload, but without having to have site hosted locally. This is most useful for developing UserCSS for third-party sites.

This plugin is a quick and dirty solution to a very specific problem, there are a lot of plugins that do much more and much better. Unless you are developing UserCSS for third-party website, this might be not a plugin you are looking for.

Installation

$ npm install --save-dev gulp-proxy-inject-css

Usage

cssInject() creates proxy server at http://localhost:8080 and returns function that creates file stream for pipeline that notifies script in browser via websocket on each change of CSS file.

import gulp from 'gulp';
import cssInject from 'gulp-proxy-inject-css';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';

const inject = cssInject('habr.com');

export const styles = () => {
  return gulp.src('sass/**/*.scss', {since: gulp.lastRun(styles)})
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist'))
    .pipe(inject());
};


export const watch = () => {
  return gulp.watch('sass/**/*.scss', { ignoreInitial: false }, styles);
};

Options

Default proxy server listens at http://localhost:8080/ and websocket at ws://localhost:8081/reload

Key Type Default Description
target String Target website to proxy, i.e. github.com
options Object Plugin options
options.port Number 8080 Proxy server port
options.host String localhost Proxy server host
options.https Boolean true Whether or not target site uses HTTPS
options.wsPort String 8081 Websocket server port
options.wsHost String localhost Websocket server host
options.wsPath String /reload Websocket server path
options.open Boolean true Whether or not to open proxy in browser automatically
options.proxyOpts Object {} Additional options to pass to http-proxy-middleware, if needed

License

MIT