File Change Watch With Gulp And Browsersync

Gulp.js together with Browsersync can be a very handy tool in web development (for example, WordPress), enabling automatic browser page reload upon changes made to the project's files. To start, you need to have Node.js installed on your OS.

Gulp.js can be installed globally with the following command:

npm install --global gulp-cli

Proceeding steps should be executed in your project's root directory. Add a package.json file and answer the questionnaire by running this code:

npm init

Next you can install Gulp and Browsersync to your project with this command:

npm install browser-sync gulp --save-dev

Download and add the 'gulpfile.js' file:

https://github.com/vaidotasweb/gulp-browsersync-node/blob/master/gulpfile.js

You can configure 'gulpfile.js', for example:

gulp.task('watch', function ()
// name your Gulp task
files: '*.css'
// define the file directory and extention
host: 'localhost',
port: 8080
// define the host and port information

Finally, you can run the Gulp command followed by the task's name:

gulp watch

Please note, you might need to reload the browser page manually to activate Browsersync.


> Related: SCSS Basics With Sass

< Home Page

Technologies: Gulp.js, Browsersync

Vaidotas Web Studio Blog provides simple to complex tutorials on topics like Web Development, Operating Systems, Graphic Design, Audio Equipment, etc.

Disclaimer: tutorials provided in this blog are intended for informational purposes. End results may vary depending on factors like different operating systems, software versions, etc.

This blog is part of VAIDOTAS WEB STUDIO