From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Gulp eco system, Part 1: Using Gulp and browserSync for browser auto refresh

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Gulp eco system, Part 1: Using Gulp and browserSync for browser auto refresh

Introduction

When developing a front-end or a front-end/backend web application, we do lots of additions and changes and every time we save our, we go to the browser and refresh it to see the changes. Well, this process takes some time from our precious development time. Thus we are going to show you how you can make this process automatic. We are going to use Gulp which is a build tool that let us define some tasks that automates and eases our web development. Gulp is a nodeJS based tool, therefore you need to have nodejs and npm, its package manager installed on your computer. If it is not already installed please go to it’s website and follow instructions to install it. Then we are going to use a module called browseSync that is responsible for spinning up a web server and do the auto refresh for us.

Setup Gulp

In order to setup gulp we run the following command in the terminal:

sudo npm install -g gulp

This will install node in our system.

Then we create a directory for out project. Let’s call it rsproject.

Inside this folder we run

npm init

This basically generates a file called package.json to store any kind of module dependencies that we have in our project.

Then we run following commands to install gulp and browserSync locally to our project and add them as dependencies in our package.json file.

npm install gulp --save-dev
npm install browser-sync --save-dev

Now that we have these dependencies installed, It’s time to use them. The next step is to create a file called gulpfile.js and add all the tasks that we need gulp to run for us. Of course our task for now will be to automate the refreshing of the page when we save files.

After creating gulpfile.js add following lines:

var gulp = require('gulp');
var browserSync = require('browser-sync');

In these two lines we basically added gulp module and browser module to our gulpfile. Now the most important thing! Let’s make our directory structure: How about following:

  |- gulpfile.js
  |- node_modules/
  |- package.json
  |- app/
      |- css/
      |- images/ 
      |- index.html
      |- js/ 

As you can see we have created an app folder and put all of our javascript, css and images plus our index.html file in it. Now we want the gulp to watch the files that we want their changes to be visible automatically in the browser. To do that we need to define gulp tasks. The structure of a task in general is as follow but not all the tasks are defined like this:

gulp.task(‘taskName’, function(){ return gulp.src(‘app/pass/to/sourceFile’) .pipe(plugin()) //plugin is basically a gulp plugin .pipe(gulp.dest(‘app/pass/to/destination’)) });

So it runs the plugin on the source files and then puts the output in the destination

Alright. You go the syntax. Now for the First step, Let’s create a server using browserSync.

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
});

This tells gulp to use browserSync to bring a server up passing the directory to use for the server. Now in order to watch our files and ask browserSync to reload, add following to your gulpfile:

gulp.task('watch', ['browserSync'], function (){
  gulp.watch('app/index.html', browserSync.reload);
  gulp.watch('app/css/*.css', browserSync.reload);  
  gulp.watch('app/js/*.js', browserSync.reload); 
});

So here we added watch task, but we also added browserSync as the second parameter meaning that by firing “gulp watch” we also run the browserSync first. Then we watch our index file every css file in css folder and every javascript file in js folder for changes and in that case we reload the browser using browserSync.reload.

Following is the complete gulpfile.js.

After saving this file, run “gulp watch” in the terminal, It spins up a web server on port 3000. Now if you have your editor and browser side by side you will see that on saving each file, the browser refreshes.

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
});
gulp.task('watch', ['browserSync'], function (){
  gulp.watch('app/index.html', browserSync.reload);
  gulp.watch('app/css/*.css', browserSync.reload);  
  gulp.watch('app/js/*.js', browserSync.reload); 
});

Following is a framework we are working on. You can see how gulp and browserSync are working to our advantage.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>