![]() Recently I've wrapped up the technique we have been using in our team for last months into the NPM module - sp-live-reload. A developer saves a file in the editor and sees the result applied right away.Īs we know, SharePoint has its nuances, which prevents BrowserSync from efficient working. You might have heard about BrowserSync, have you? It is a module which can be injected into the page(s) and watches for changes for instantaneous page reload or scripts reload. Yet, there was one which has been missed and desired by some engineers. More and more features from the funky front-end development are here at our disposal. It transforms into some sort of a hybrid of Visual Studio Code'ing, Gulp tasks, and Chrome Dev Tools debugging and tweaks. We're getting used to modern SharePoint (client side) development day by day. Here is the scss task as a sample: gulp.Menu SharePoint client side development with Live Reload 05 November 2016 on SharePoint, Node.js, Gulp, Toolchain, Live Reload Gulp.task("server",, function() ) Call LiveReload within a task re-run to request a page refreshįinally, for the magic, we’ll add a new pipe to our html, scss, and js tasks to LiveReload when these tasks are called to be run again by gulp.watch. Var connectLiveReload = require("connect-livereload") Require the connect npm plugin and any additional middleware Require the module in your gulpfile.js and modify the server task to make use of it. ALTERNATIVE TO LIVERELOAD INSTALLInstall it as usual: npm install -save-dev connect-livereload Since it is a middleware for our connect server, we’ll use it so. This means that your built files will not include this piece of code. ALTERNATIVE TO LIVERELOAD CODEAll it literally does is inject a piece of code to your files while the connect server is running. We’ll add connect-livereload to our project. Now our connect server knows to server static files from build/ when requested over port 8080. Return e(connectServeStatic("build/")).listen(8080) Var connectServeStatic = require("serve-static") I’m serving a static website that outputs to build/ and so will configure it as such using the serve-static middleware for connect: npm install -save-dev serve-staticĮditing our gulpfile.js to reflect the new changes: // Require the connect npm plugin and any additional middleware It knows to listen to port 8080 but does not know what the root of the website/app is. Open your gulpfile.js, require connect and write a new task called server: // Require the connect npm pluginįor now, the connect server cannot do anything. Fixing our problemįor the more relevant part, let’s start discussing what we are going to do to solve the problem. ![]() As extension runs on every page in your browser, it doesn’t seem to be a good fit for the purpose of LiveReload. Extensions can also be guilty to slow down your browser, by adding unnecessary and slow running scripts blocking your useful content. ![]() However, in addition to being limited to the Chrome browser, extensions are potentially vulnerable. Many of them are based on installing a Chrome browser extension. This is important or else it won’t work.įrom dmitriz’s gulp-automation project, which inspired me to understand his code and implement my own from scratch, you can see why he argues for a different approach: ![]() Make sure you can view it in your tool bar and that the circle is filled in with black. ALTERNATIVE TO LIVERELOAD DOWNLOADNext, we need to download the Google Chrome extension LiveReload, go to the Chrome Store and download it here. If you read the article on implementing LiveReload, you must have come across the following section: Not only this, I neither want to install an additional extension for something I do not do 24×7 (hobby web developer), nor bloat my Firefox installation, especially if I can help it. This means I do not have access to an official addon as I did on Chrome. Since initially learning about LiveReload in 2015, I have moved to Firefox (and for the most part, appreciate it). However, if you’re like me, you’re still using Gulp simply because it works for you and you’re not working on big projects or in big teams to necessitate the change to Webpack. The fever over task-runners like Grunt, Gulp and Broccoli has largely died in 2017 due to superior alternatives such as Webpack. LiveReload: A Quick Guide to Using LiveReload with Gulp.Call LiveReload within a task re-run to request a page refresh. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |