npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-refresh

v1.1.0

Published

Automatically reloads your browser if files change

Downloads

3,833

Readme

gulp-refresh

Build Status License

A lightweight gulp plugin for livereload to be used with a livereload middleware of your choice:

This repo is based on a fork of Cyrus David's gulp-livereload. Since he hasn't been active since a long time, it seemed like a good idea to fork it. I'm also using it in a lot of my upcoming projects and I didn't want it to just die. Please keep in mind that v1.0.0 of this plugin is equal to v3.8.1 (the latest version) of the original plugin. So no extra effort. Just replace gulp-livereload with the latest version of gulp-refresh in your dependencies.

Install

npm install --save-dev gulp-refresh

Usage

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      refresh = require('gulp-refresh')

gulp.task('scss', () => {
  gulp
    .src('src/*.scss')
    .pipe(sass().on('error', sass.logError)))
    .pipe(gulp.dest('dist'))
    .pipe(refresh())
})

gulp.task('watch', () => {
  refresh.listen()
  gulp.watch('src/*.scss', ['scss'])
})

Take a look at other examples here.

Options

Can either be set through livereload.listen(options) or livereload(options).

| Property name | Description | Default value | | ------------- | --------------------------------------------------------- | ------------- | | port | The server's port | | | host | The server's host | | | basePath | Path to prepend all given paths | | | start | If the server should be started automatically | | | quiet | Disable console logging | false | | reloadPage | Path to the browser's current page for a full page reload | index.html |

API

livereload([options])

Creates a stream which notifies the livereload server on what changed.

.listen([options])

Starts a livereload server. It takes an optional options parameter that is the same as the one noted above. Also you dont need to worry with multiple instances as this function will end immediately if the server is already runing.

.changed(path)

Alternatively, you can call this function to send changes to the livereload server. You should provide either a simple string or an object, if an object is given it expects the object to have a path property.

NOTE: Calling this function without providing a path will do nothing.

.reload([file])

You can also tell the browser to refresh the entire page. This assumes the page is called index.html, you can change it by providing an optional file path or change it globally with the options reloadPage.

.middleware

You can also directly access the middleware of the underlying server instance (mini-lr.middleware) for hookup through express, connect, or some other middleware app

.server

gulp-livereload also reveals the underlying server instance for direct access if needed. The instance is a "mini-lr" instance that this wraps around. If the server is not running then this will be undefined.

Debugging

Set the DEBUG environment variables to * to see what's going on.

$ DEBUG=* gulp <task>