AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Js sass livereload es65/2/2023 ![]() Instead, we add a flag to our terminal command: # Run Rollup with the watch plugin enabled. The difference between rollup-watch and other Rollup plugins is that we don’t have to make any changes to in order to use it. Let’s start by installing the plugin: npm install -save-dev rollup-watch Step 1: Run Rollup with the -watch flag. To do that, we’ll use the rollup-watch plugin, which is a little different from the other Rollup plugins we’ve used so far - but more on that in a bit. In our project, we want to watch the src/ directory for any file changes, and when changes are detected we want to trigger a new bundle creation from Rollup. ![]() In the case of build tools, the most common action is to trigger a rebuild. This may be familiar if you’ve worked with webpack, Grunt, Gulp, and other build tools in the past.Ī watcher is a process that runs while you work on a project, and when you change files in any of the folders it’s monitoring, it triggers an action. 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. 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. 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 ![]()
0 Comments
Read More
Leave a Reply. |