Npm gulp and express livereload install#
When that’s finished, the last step is to install gulp locally to your WordPress theme folder. This will step you through the process of creating a package.json file. To create this file, just navigate to your theme’s directory in the terminal and run: npm init This is basically just a config file that Node uses to figure out which packages it needs to bring down and install (things like a SASS concatenate or a JavaScript linter or any number of other tools). In the root directory of your theme file, you will also need to install and set up a local version of gulp, and add a package.json file to manage your dependencies. This will ensure that you can use the gulp command from the command line. With Node installed, you can install gulp globally on your system by opening up your Terminal and running: npm install -g gulp
If you’re not set up with Node yet, I’d recommend following the steps on their website (or better yet, installing Homebrew). Setting Things Upįirst off, gulp runs on top of NodeJS, and is generally operated from the command line. But by the end you’ll be compiling SASS, minifying Javascript, working with livereload and implementing a SVG icon system. My goal was to write a short introduction to how this works. For those unaware, Gulp is a slick JavaScript task runner, which can be used to concatenate JS and CSS files, lint files, and generally automate your front-end workflow.
a little while now, I’ve been using Gulp in my WordPress themes to automate my front-end workflow and add some handy helpers along the way. ping browser on Express boot, once browser has reconnected and handshaken LiveReloadServer.watch(path.join(_dirname, 'public')) open livereload high port and start to watch public directory for changesĬonst liveReloadServer = livereload.createServer() Set up Express to both start livereload anycodings_livereload server watching the public directory and anycodings_livereload ping the browser during nodemon-induced anycodings_livereload restart: const livereload = require("livereload") Ĭonst connectLivereload = require("connect-livereload") nodemon restarts server on changed backend files.connect-livereload monkey patches every served HTML page with a snippet that connects to this high port.livereload opens a high port and notifies the browser of changed public files.Here's how the packages team anycodings_livereload up: This way you don't anycodings_livereload need Gulp. You can livereload both front and anycodings_livereload backend changes to the browser with anycodings_livereload 'livereload', 'connect-livereload', and anycodings_livereload 'nodemon' packages. 3001 anycodings_livereload will be used as proxy. When running gulp in terminal, it will anycodings_livereload start watching server as well as anycodings_livereload refreshing browser on change in any anycodings_livereload files.Īlthough we specify port 3001 in express anycodings_livereload server, our app will be working on port anycodings_livereload 3002, as we write in browser-sync. Gulp.watch().on("change", browserSync.reload) ReloadDelay: 1000 //Important, otherwise syncing will not work So, dependencies from package.json to anycodings_livereload make it work: "devDependencies":, //UI, can be any port For this I use browser anycodings_livereload sync. But nodemon cannot refresh anycodings_livereload browser page. Nodemon anycodings_livereload can see when changes occur in any types anycodings_livereload of files.
For anycodings_livereload server watching I use nodemon.
Restarting server is one thing, anycodings_livereload refreshing browser is another thing.
0 kommentar(er)
