Reloading browser with Gulp browser-sync

Automating Tasks

gulp-1

In this article, we will see how the watch method and browerSync help us to automate some repeated task like pre-processing. We will extend the gulp project we have created in previous articles.

Gulp provide watch method watch out for a file being saved, once a file is saved it call cited gulp task. Gulp watch method comes with gulp module since there is no need to install any npm_modules.

A typical gulp watch method seems as follows

gulp.task( 'files to watch out for change', [ tasks need to run ] )

We will create a gulp watch task as we created the gulp-sass task in the previous article.

gulp.task('watch', function(){
     gulp.watch('app/scss/*.sass', ['sass']);
});

The ‘*’ in front of ‘.sass’ the extension indicates any file that has the extension of ‘.sass’, in real time we will need to watch more than one file to run a specific task. Run the watch task and make the change on sass file we have on app folder, once we save the change on SASS file, CSS file will be updated instantly.

Note: Don’t delete the task sass which we created in the previous article, just paste the above watch task code below to the sass method.

Now everything is fine, we have created a SASS file and automated its compile process, but to make sure that the style is written properly we should head over to the browser and need to reload, Gulp provide us browser-sync plugin to automate this process, watch method observes file change and calls stated tasks, those tasks tells browser-sync to reload the browser page once they complete their task.

First, we will install gulp plugin browser-sync from npm_modules.

npm install browser-sync --save-dev

Create a variable to use browser-sync module.

var browserSync = require('browser-sync').create();

Next, we will create browser-sync task on gulpfile.js, at the end of each task the root of the server should be reloaded (in simple the folder where we have placed the index file), that folder should be mentioned base directory on the browser-sync task. A typical browser-sync task looks like the following

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

We also need to change the sass task since the browser-sync will update the CSS in the browser. Make the change on sass task as mentioned below

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.sass') 
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Finally, we should also do some tweaks on watch task, previously we have created watch task with the single argument and call back function, now will add up the second argument which is typically an array which has the list of task names those tasks will be executed before the watch task is initiated.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
});

Everything is ready for now, all we need to do is testing our project by running the following command

gulp watch

Here look the change happens on the browser whenever the sass file is modified.

gulp

We will examine a few more plugins in the upcoming article.

Happy coding πŸ™‚

Preprocessing with Gulp

Installing Gulp plugin and using them

gulp-1

In the previous article, we have created Gulp file with default task, we will learn to create a Gulp file to compile SASS file into CSS in this article.

First thing first, we need to install gulp plugin called gulp-sass in order to compile SASS file as CSS, this can be done by running the following command from your project root folder using the terminal.

npm install gulp-sass --save-dev

Don’t forget to add –save-dev flag which adds gulp-sass into devDependecies in the package.json file as well we have to add gulp-sass from the node_modules folder as we did with the gulp.

var sass = require('gulp-sass')

Now we’ll create a sample sass file, open a text editor and paste the following code and save as main.sass.

$primary-color: #3570ce 
$secondary-color: #1c9686
$text-color: #ffffff

.heading
	border-color: $secondary-color
	border: 1px solid
	background-color: $primary-color
	color: $text-color

All we need to do is creating a gulp task which helps us to compile the SASS file and produce CSS file, open the gulpfile.js that we have created earlier and create a new gulp task with following code, it takes SASS file and with the help of the gulp-sass plugin, it compiles the SASS into CSS.

gulp.task('sass', function(){ 
	return gulp.src('app/sass/main.sass') // Source of the sass file
	    .pipe(sass()) // Using gulp-sass plugin
	    .pipe(gulp.dest('app/css/')) // Compiled code to be saved here
});

Note: gulp-sass uses LibSASSΒ to use Ruby methods gulp-ruby-sass plugin should be used instead above mentioned gulp plugin. This task is named as sass since we have loaded gulp-sass plugin from node_modules in the variable sass earlier.

Once you have done all the things, start the command prompt from the project root folder and run the sass gulp task using the following command.

gulp sass

For the above-given SASS style, the compiled CSS style will be the following

.heading {
  border-color: #1c9686;
  border: 1px solid;
  background-color: #3570ce;
  color: #ffffff;
 }

When we work on SASS in real time, there would be many modifications on SASS file, modifying SASS file and compiling them into CSS would time consuming task, it would be better if we automate this process, in the coming article, we would look how gulp tasks watch and browserSync helps to automate such tasks.

Happy Coding πŸ™‚