CODEWITHSUNDEEP
rolluprollupjsnpm-live-server
704
704

Reputation: 297

Can I make this workflow faster? Rollup watch / npm live-server

I'm trying to achieve a 'live' workflow for a website i'm about to build.

It's based on this boilerplate.

I currently have this workflow working:

Write code -> Save -> 'Rollup watch' rebuilds build/main.js from src/main.js -> 'live-server' refreshes browser.

I'm new to a lot of this, so i'll be honest and say that the 8s it takes per build is a hell of a lot faster than my old workflow, which involved manual fileZilla and a noobier me developing on a password protected subdomain.

Is there a way I should be doing this so that I'm not waiting for the builds to happen - it seems unnecessary? E.g. use a dummy index.html that temporarily links to the src/main.js until i'm ready to build and deploy the bundled version on to my domain?

This is the current index.html of the boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example for Three JS</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div id="homepage"></div>

    <script src='build/main.js'></script>

    <script>
        const app = new LIB.App;
        app.init();
    </script>

</body>
</html>

And here is what my rollup config file looks like:

import resolve from '@rollup/plugin-node-resolve'; // locate and bundle dependencies in node_modules (mandatory)
import { terser } from "rollup-plugin-terser"; // code minification (optional)

export default {
    input: 'src/main.js',
    output: [
        {
            format: 'umd',
            name: 'LIB',
            file: 'build/main.js'
        }
    ],
    plugins: [ resolve(), terser() ]
};

I tried just switching out the script source from 

<script src='build/main.js'></script>

to

<script src='src/main.js'></script>

and removing:

<script>
    const app = new LIB.App;
    app.init();
</script>

But this didn't work - so i'm here looking for input.

Upvotes: 2

Views: 2853

Answers (2)

Mogsdad
Mogsdad

Reputation: 45750

You could use separate config files, as per 704's answer, but then you have two files to maintain forever. An alternative is to simply make the minification step dependent on some condition. For example:

 // Add minification plugin for 'production' build
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(terser());
  }

Upvotes: 0

704
704

Reputation: 297

The 'answer' is that I should have been using a dev and prod version of my rollup builds. The dev version should have minification removed.

From Documentation:

You can, if you like, specify a different config file from the default rollup.config.js:

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

Upvotes: 4

Related Questions