tapio / live-server

A simple development http server with live reload capability.
http://tapiov.net/live-server/
4.43k stars 484 forks source link

Calling custom code every time a change happens #340

Open b3008 opened 4 years ago

b3008 commented 4 years ago

Issue description

At every change detected, I wanted to add a build step before issuing a reload. I thought the way to do this would be to place the code that in the middleware functions array, but the code never executes.

Software details

I ended up adding a callback function for the change message on liveServer.watcher, like so:

var liveServer = require("live-server");
var childProcess = require('child_process');

var params = {
    port: 8080, // Set the server port. Defaults to 8080.
    host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
    // root: "/public", // Set root directory that's being served. Defaults to cwd.
    open: false, // When false, it won't load your browser by default.
    ignore: '/dist/', // comma-separated string for paths to ignore
    file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
    wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
    mount: [['/components', './node_modules']], // Mount a directory to a route.
    logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
    middleware: [function(req, res, next) { 

        //code here does not seem to execute

        next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
};

liveServer.start(params);
liveServer.watcher.on('change', function(e){
    if(e.indexOf('/dist/')==-1){
        console.log('executing: npm run build');
        childProcess.execSync(`cd ${__dirname}; npm run build`);

    }
})

My question is, is there a better way to do this? Is this what middleware is actually for?

felippe-regazio commented 3 years ago

There is an opened PR for that request: https://github.com/tapio/live-server/pull/366

hilmanski commented 3 years ago

facing same issue @b3008 Do you know how to run code or script first, then reload?

skyflyer commented 11 months ago

I am serving files from dist, so I'm mounting / to ./dist and want to ignore the changes happening in dist folder, obviously. The mount points are added to the watcher if watch directories are not specified explicitly.

In other words, my code is in src folder, the generated outputs in dist folder and this configuration works wonders 😄:

var liveServer = require("live-server");
var childProcess = require('child_process');

var params = {
    mount: [['/', './dist']], // Mount a directory to a route.
    // logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
    watch: ['./src']
};

liveServer.start(params);
liveServer.watcher.on('change', function(e){
    console.log('Building...');
    childProcess.execSync(`npm run build:css && cp ./src/*.html ./dist`);
})

Hope it helps someone.