Calling custom code every time a change happens

[b3008]

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?

• Command line used for launching live-server:
• OS: macOS Catalina
• Node.js version: 12.7.0
• live-server version: 1.2.1

[felippe-regazio]

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

[hilmanski]

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

[skyflyer]

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.