Nostalgic Punchcard Missing


    0.0.10 • Public • Published


    Automatically refresh styles when files are updated - allowing you to optionally execute a compile step.


    npm install autorefresh -g


    1. Start up an autorefresh server
    autorefresh -c [command] -p [port] [files...]


    • -c [command] is the command to execute when one of the [files] change
    • -p [port] is the port to run on, defaults to 2886
    • -d [delay] is the time in milliseconds to wait before notifying the client that a command has finished
    • -q [boolean] if we want to be quiet and not output anything
    • [files] is a list of files or a glob pattern - just be sure to not match the files you generate, as this can cause an infinte loop
    1. Add a script tag in your html page in the head before the /html tag:
    <script>document.write("<script src='//"+(||"localhost").split(":")[0]+":2886/refresh.js'><"+"/script>");</script> 


    Note: an example that uses LESS is available in the /example folder - be sure to install LESS: npm install less -g first.

    Say you have a HTML file (test01.htm), add the Autorefresh script tag like so:

        <link rel="stylesheet" type="text/css" href="style.css">
        <script>document.write("<script src='//"+(||"localhost").split(":")[0]+":2886/refresh.js'><"+"/script>");</script> 

    And where a LESS file (style.less) generates the style.css file like so:

    @color-main: #007;
    body { background: @color-main; }

    Using a file to compile the LESS file like so:

    lessc style.less>style.css

    You simply run this command:

    autorefresh -c ./ style.less

    Now open test01.htm in a browser, then edit style.less and change the @color-main to "#0a0" and save - you should see the page instantly refresh the background style to a lovely green colour.


    Note: you can add the following parameters to the refresh script:



    • socketurl is the URL for the socket you want to connect to, eg: "socketurl=http%3A%2F%2Flocalhost%3A2886%2Fautorefresh"
    • specify is a boolean that allows you to specify which style tags are refreshed - by default we will refresh all style tags. Add a data-autorefresh="true to the links you do want refreshed, eg:
        <link rel="stylesheet" type="text/css" href="base.css">
        <link rel="stylesheet" type="text/css" data-autorefresh="true" href="style.css">
        <script>document.write("<script src='//"+(||"localhost").split(":")[0]+":2886/refresh.js?specify=true'><"+"/script>");</script> 

    Will only auto refresh the style.css file, and leave the base.css file alone.

    Why yet another one of these?

    There are quite a few good tools that do similar things to autorefresh, but I found that my use case wasn't easily implemented, or had issues such as timing and other compilation problems that just got in the way. The use case is this:

    • Using LESS with source maps
    • Integrating within an existing project using a particular IDE, (though we prefer the solution to be independent from the IDE)
    • Reloading the whole page can take a while, so want to just refresh the CSS
    • Minimal effort setup, allowing a compilation step




    npm i autorefresh

    DownloadsWeekly Downloads






    Last publish


    • jsguy