![]() set up root html5 template file touch public/index.html.set up sass compiled output directory mkdir -p public/css. ![]() set up sass source file touch sass/styles.scss.set up sass source directory mkdir sass/.install and save required dependencies using npm install -D.add and commit your 2 new files to be tracked in git.initialize your project with a package.json file.Set up gulp + sass + livereload for your project set up node modules If you already have these installed, skip to the next step. If you do not have npm or gulp installed globally, you need to install them. watch for any changes in the public directory, and trigger live-reloadįirst, make sure you have all the required dependencies.watch for any sass changes, then compiles sass source into css.So if we make a small change to src/main.This Gist goes over setting up a gulp workflow that will: The process stays active, and it’s now watching for changes. node_modules/.bin/rollup -c -watch checking rollup-watch version. node_modules/.bin/rollup -c -watchĪfter running the command, we see a different output in the console: $. 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 ).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |