Rollup plugin livereload how to#
Rollup plugin livereload manual#

NOTE: If you don’t have a copy of the project, you can clone the project as it stands at the end of Part II using this command: git clone -b part-3-starter -single-branch Step 0: Add a watch plugin to Rollup.Ī common development tool when working with Node.js is a watcher.

node_modules/.bin/rollup -c every time we change a file - we want to make rebuilding the bundle automatic.

Rollup plugin livereload manual#

And since every manual step in a process is a higher risk for failure than an automated step - and because it’s a pain in the ass to have to run.

Rollup plugin livereload how to#

Part III: How to Use Rollup.js for Your Next Project: LiveReloadĪt this point, our project is successfully bundling JavaScript and stylesheets, but it’s still a manual process. So in the next part, we’ll have Rollup watch our files for changes and reload the browser whenever a file is changed. However, it’s still kind of a pain in the ass to have to manually rebuild the bundle every time we make a change. Great! So now we have a pretty solid build process: our JavaScript is bundled, unused code is removed, and the output is compressed and minified, and our stylesheets are processed by PostCSS and injected into the head. The stylesheet is processed by PostCSS and injected by Rollup. We’ll see that the page is now styled, and if we inspect the document we can see the stylesheet was injected in the head, compressed and minified and with all the vendor prefixes and other goodies we expected from PostCSS: node_modules/.bin/rollup -c) and open build/index.html in our browser. With the plugins installed, we can rebuild our bundle (. Rather than wrestling with the config, we’ll just know that it’s being run twice (which is harmless in this case) and silence the warning. import to cssnext() because both it and cssnano() use Autoprefixer, which triggers a warning. + import './styles/main.css' // Import a couple modules for testing. Right at the top of src/scripts/main.js, load the stylesheet: + // Import styles (automatically injected into ). Part II: How to Use Rollup to Process and Bundle Stylesheets tag like we normally would instead, we’re going to use an import statement in.Part I: How to Use Rollup to Process and Bundle JavaScript Files.NOTE: If you don’t have a copy of the project, you can clone the project as it stands at the end of Part I using this command: git clone -b part-2-starter -single-branch Series Navigation