- #Npm gulp and express livereload how to
- #Npm gulp and express livereload install
- #Npm gulp and express livereload code
- #Npm gulp and express livereload download
#Npm gulp and express livereload code
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.
#Npm gulp and express livereload install
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.
#Npm gulp and express livereload download
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. 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.
#Npm gulp and express livereload how to
You can find the full code as an example on my git repo.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).
In the last article we ended up with gulpfile.js that looks like this const = require("gulp") Ĭonst cleanCSS = require("gulp-clean-css") Ĭonst liveReload = require("gulp-livereload") Įfault = series(minif圜SS, minifyJS)
we agree that to access a task we either run gulp for public tasks or just gulp to run the default flow.īut to be honest, it's a little bit tedious to run the command every time we modify a file, whether it's a big or a small change, don't worry gulp has an easy way to keep watching for files changes and run any task you specify. In the previous article, we talked about gulpjs and we managed to create a couple of gulp tasks.
0 kommentar(er)
