![]() ![]() Making sure that LiveReload plugin is active (click the icon in the upper-right of your menubar), we'll add the following code to our index. It should be blank as we haven't added anything to index.html. You want to keep that running and open up your index.html file up in the Chrome Browser. You'll now see a server running in your terminal. This is easy as typing the following in your terminal: It's time to run our gulp tasks, in this case just our 'watch'. Still inside our project's root directory, we want to add a index.html file into our app folder. Mkdir app Creating our HTML page and seeing live changes You'll see on one of the line gulp.watch('app/**').on('change', livereload.changed) that we are 'watching' a folder called app and everything in that folder via the use of the wildcard ** ). Var gulp = require ( 'gulp' ), livereload = require ( 'gulp-livereload' ) gulp. Once you've created that file, copy the following code into your gulpfile.js: I'll explain more about this as we go but for right now start by creating a gulpfile.js file by typing this in your terminal: This is where we tell Gulp what tasks we want run and in what order. The first thing you'll want to do is create a Gulpfile. You can do this by going to Window > Extensions in your chrome browser and checking the box "Allow access to file URLs" for LiveReload. One really important thing to note is that you need to give the plugin some extra access once you've installed it. This is where you will be toggling on and off the Plugin. Once you install it you should notice a small icon in the right hand corner of your browser window's toolbar. There are several ways to set up LiveReload but I think one of the simplist is with a plugin for a chrome browser, LiveReload Chrome Plugin. (NOTE: If you get errors, try adding sudo to the line above as in: sudo npm install gulp gulp-livereload -save-dev) Installing the LiveReload Chrome Plugin The -save-dev part adds both gulp and gulp-reload to your package.json file. What that last little bit of code did was download the gulp package along with the gulp-reload package, a package that adds some shortcuts for setting up livereload. Npm install gulp gulp-livereload -save-dev Making sure you're still in your project's directory, type this into the terminal: The next thing we want to do is give it dependencies, two to be exact. This file is used by npm to keep track of your projects dependencies. After this is done you'll find a package.json file inside of your project directory. Don't worry, nothing in this world is perminent. Prevent this user from interacting with your repositories and sending you notifications. You'll be asked a whole lot of questions here and all you really have to do here is to keep hitting enter. Next we want to prepare our project for using Node Package Manager (npm) by typing this into the terminal: We can do this by typing the following into our terminal: The first thing we're going to want to do is create our project directory and change into that directory. We're going to be using npm command in this tutorial, which is short for Node Package Manager, to install a couple of node 'packages' that will help us get our project up and running. With Node installed you now should have access to both the node and npm bash commands in your terminal. I could go into more detail but for now I'll just say I don't like where the homebrew-installed version of Node puts certain files. I recommend using the package installer on the node.js site as it makes it much easier. If not, this might be a perfect time to do so. This tutorials assumes that you have Node installed. In order to accomplish this, we'll use the task runner Gulp to make sure LiveReload knows about our changes. This can be very productive if you are working on a webpage and want to see the changes right away. ![]() Mode: isProd ? 'production' : isDev & 'development',įilename: isDev ? 'script/script.js' : 'script/bundle-.js',ĬontentBase: path.This tutorial will show you how to set up LiveReload, a program that applies CSS/JS changes in your browser w/o reloading the page (and autoreloads the page when HTML changes). const path = require('path') Ĭonst HtmlWebpackPlugin = require('html-webpack-plugin') Ĭonst MiniCssExtractPlugin = require('mini-css-extract-plugin') Ĭonst autoprefixer = require('autoprefixer') I updated webpack 4 to webpack 5, after which everything works, except for updating the browser (live reload) who can tell the reason? here is my config. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |