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

License

MIT