{"id":300,"date":"2019-07-25T10:48:01","date_gmt":"2019-07-25T17:48:01","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=300"},"modified":"2020-09-01T18:11:58","modified_gmt":"2020-09-02T01:11:58","slug":"aem-auto-reloading-your-browser-on-js-html-and-css-changes-using-gulp-and-browsersync","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/aem-auto-reloading-your-browser-on-js-html-and-css-changes-using-gulp-and-browsersync\/","title":{"rendered":"AEM: Auto-Reloading your browser on JS, HTML, and CSS changes using Gulp and BrowserSync"},"content":{"rendered":"\n

Live Reloading has become a norm in the day to day development of modern web applications. With the help of Live Reloading, many developers save time and are able to focus more on development by avoiding the build process with each change to a static file that is served. AEM<\/a> offers a code editor within CRX DE<\/a>, but it could sometimes become a hassle moving your code between CRX DE and your IDE, and sometimes editing in CRX DE could result in code loss.<\/p>\n\n\n\n

\"coding<\/figure><\/div>\n\n\n\n

First, make sure your AEM instance is started. Head over to Gulp<\/a>\n and follow their quick start to install Gulp and all of its \ndependencies. Once you have completed the quick start you should have a \nfile \u201cgulpfile.js\u201d, in your project root.<\/p>\n\n\n\n

For AEM 6.4 Users your file structure should look like this after adding the gulp file:<\/p>\n\n\n\n

testapp\/\n| \u2014 core\/\n| \u2014 it.launcher\/\n| \u2014 it.tests\/\n| \u2014 pom.xml\n| \u2014 gulpfile.js\n| \u2014 README.md\n| \u2014 ui.apps\/\n| \u2014 ui.content\/<\/code><\/pre>\n\n\n\n
Open your gulpfile.js and let\u2019s start adding the required dependencies to watch files and live reload.<\/p>\n\n\n\n
There are 4 packages that you must install and require in your gulpfile.js: gulp<\/a>, gulp-sass<\/a>, and gulp-slang<\/a>, browsersync<\/a>. In your terminal, use this command to install each package as development dependencies:<\/p>\n\n\n\n
npm install browser-sync gulp-sass gulp-slang gulp-watch gulp --save-dev<\/code><\/pre>\n\n\n\n
You can also install gulp-util, a package that will allow you to output log statements into the console.<\/p>\n\n\n\n
npm install gulp-util --save-dev<\/code><\/pre>\n\n\n\n
After installing, edit your gulpfile.js to require the packages:<\/p>\n\n\n\n
\"gulp
How to require packages for gulp.<\/figcaption><\/figure><\/div>\n\n\n\n
Now let\u2019s create a task that will watch our changes to files with the extensions : .html, .hbs, .jsp, .js, and .css. For example:<\/p>\n\n\n\n
\"gulp
Gulp task to watch for changes to files with certain extensions.<\/figcaption><\/figure><\/div>\n\n\n\n
Your\n watch paths could be different from the ones in the example, so adjust \nthem accordingly. You also have the option of watching specific files. \nFor reference on gulp-watch , check out the docs<\/a>.<\/p>\n\n\n\n
Run the \u201cwatch\u201d task in your terminal.<\/p>\n\n\n\n
gulp watch<\/code><\/pre>\n\n\n\n
Your\n application will now reflect any changes that you make in the watch \npaths and file extensions that you specified. Make some changes and \nrefresh that page and you should see the changes! \ud83d\ude42<\/p>\n\n\n\n
If you don\u2019t see the changes immediately try clearing and disabling your cache and hard-reloading the page.<\/p>\n\n\n\n
Now that we are watching the files that we make edits to, let\u2019s add the Live-Reloading.<\/p>\n\n\n\n
\"gulp
Gulp task to add live-reloading.<\/figcaption><\/figure><\/div>\n\n\n\n
Run the \u201cbrowser-sync\u201d task:<\/p>\n\n\n\n
gulp browser-sync<\/code><\/pre>\n\n\n\n
A new tab or window will open and you can now start making edits to your code and see changes without refreshing! \ud83d\ude42<\/p>\n\n\n\n
Again, If you don\u2019t see the changes immediately try clearing and disabling your cache and hard-reloading the page.<\/p>\n","protected":false},"excerpt":{"rendered":"
Live Reloading has become a norm in the day to day development of modern  web applications. With the help of Live Reloading, many developers save  time and are able to focus more on development by avoiding the build  process with each change to a static file that is served.<\/p>\n","protected":false},"author":2,"featured_media":366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[15,10,17,16,18,19],"_links":{"self":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/300"}],"collection":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":5,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/300\/revisions\/375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/366"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}