Giter Club home page Giter Club logo

easy-livereload's Introduction

easy-livereload

This is yet another library to use livereload very easily for express/node.js-based development. It is express middleware which provides both a livereload server and a javascript client. It is designed to be used with node-dev so that restarting a server process is also possible.

The major features of this library include:

  • using livereload (PROTOCOL 7) server code from the original author,
  • using livereload.js client code from the original author,
  • using fs.watch() to check file changes instantly,
  • allowing to automatically restart server code (if invoked with node-dev), and
  • all-in-one package to enable with at least one-line code.

Install

npm install easy-livereload node-dev

Usage

Minimal configuration:

app.use(require('easy-livereload')());

Typical configuration:

var path = require('path');
var express = require('express');
var app = express();

if (app.get('env') === 'development') {
  var livereload = require('easy-livereload');
  var file_type_map = {
    jade: 'html', // `index.jade` maps to `index.html`
    styl: 'css', // `styles/site.styl` maps to `styles/site.css`
    scss: 'css', // `styles/site.scss` maps to `styles/site.css`
    sass: 'css', // `styles/site.scss` maps to `styles/site.css`
    less: 'css' // `styles/site.scss` maps to `styles/site.css`
    // add the file type being edited and what you want it to be mapped to.
  };
  
  // store the generated regex of the object keys
  var file_type_regex = new RegExp('\\.(' + Object.keys(file_type_map).join('|') + ')$');
  
  app.use(livereload({
    watchDirs: [
      path.join(__dirname, 'public'),
      path.join(__dirname, 'app')
    ],
    checkFunc: function(file) {
      return file_type_regex.test(file);
    },
    renameFunc: function(file) {
      // remap extention of the file path to one of the extentions in `file_type_map`
      return file.replace(file_type_regex, function(extention) {
        return '.' + file_type_map[extention.slice(1)];
      });
    },
    port: process.env.LIVERELOAD_PORT || 35729
  }));
}

By default this script tries to load the live reload script itself, but if that doesn't work for some reason then you can put your app into the easy-livereload options. This will add a local variable to your app under app.locals.LRScript.

var express = require('express');
var app = express();
var livereload = require('easy-livereload');

if (app.get('env') === 'development') {
  app.use(livereload({
    app: app
  }));
}
doctype html
html(lang="en")
  head
    title Livereload
    
    != LRScript //- loads the livereload script

Example scripts entry in package.json:

"scripts": {
  "start": "env NODE_ENV=production node app.js",
  "start-dev": "env NODE_ENV=development node-dev app.js"
}

easy-livereload's People

Contributors

dai-shi avatar tjbenton avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.