HTML Boilerplate with (Live Reload, SASS, Autoprefixer) using Gulp

gulp-boilerplate

gulp-boilerplate

 

A common concern for frontend developers is setting up live browser reloading when they make updates to their CSS/Sass, HTML and other files.

Fortunately, there’s a JavaScript task runner called Gulp.js. Today will setup a boilerplate using Gulp which will auto reload the browser on changing any HTML or SCSS file. Also we will see how to compile sass and add browser-specific vendor prefix using Gulp Task Runner.  So, let’s get started!

Prerequisites

  • Nodejs
  • NPM

Start Our Project

run the following command:

npm init

This will prompt us with a series of questions, which will ultimately generate a package.json file. You can hit [enter] through all of the prompts until you get back to the command line.

Installing Gulp, SASS, Browsersync & Autoprefixer

Run the following command:

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

We’re using NPM to install all the packages that we need and we are saving them in package.json file as dependencies.

Creating Files & Folders for startup

Currently, our folder just has a node_modules folder and the package.json file.
create an index.html file in the root directory with the following contents:

 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>HTML5 boilerplate</title>
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">


<link rel="stylesheet" href="css/main.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<h1>HTML5 boilerplate</h1>

</body>

</html>

Next, let’s create a new folder called sass and 2 files inside of it called _variable.scss & main.scss.

_variable.scss:

//Color Variables
$default_color : #404040;

//Transition Variables
$transition3s : all 0.3s ease-in-out;

main.scss

@import 'variable';

/* General
-------------------------------------------------------------- */
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body { 
font-family: sans-serif; 
font-weight: 400; 
font-size: 14px; 
line-height: 1.5; 
-webkit-font-smoothing: antialiased; 
text-rendering: optimizeLegibility; 
min-height: 100vh;
color: $default_color;
}
img {
max-width: 100%; 
vertical-align: middle; 
-ms-interpolation-mode: bicubic;
}

a {
display: inline-block;
text-decoration: none;
transition : $transition3s;
}

We are using _variable.scss file to store Sass variables and mixins which we are importing in main.scss file and can use those variables and mixins and finally Gulp will compile main.scss file and export to main.css file in the css folder.

We didn’t create CSS folder and main.css file because we are going to create them through Gulp.

Setting up the Gulp File

create a file named: gulpfile.js in the project root. To begin, we start with importing the packages we installed earlier via npm:

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

The first task we’ll create will handle the sass compiling:

var prefixerOptions = {
browsers: ['last 2 versions']
};


gulp.task('sass', function() {
return gulp.src('./sass/main.scss')
.pipe(sass())
.pipe(prefix(prefixerOptions))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});

First, we’re naming the task sass, then we’re returning a source file named main.sass.

If you have multiple sass files inside of the sass folder, you could use an asterick instead of explicitly naming the file. For instance: ./sass/*.sass. You can also reference multiple folder locations by placing them in side of an array, like: [‘location1’, ‘location2’, etc..].

But remember, we are not going to add the files here which we will import in the main.scss, like: _variable.scss

Next, we use the .pipe method to call the sass compiler.

Then, we use prefix method to add prefix.

After that, we run gulp.dest to place the compiled CSS to a new folder. In this case, it will transform main.sass to main.css.

Finally, we call browserSync.stream() which will refresh the browser after the CSS has been compiled.

Next, we’ll create another task to create a local server through BrowserSync, and watch any sass and HTML files:

gulp.task('serve', ['sass'], function() {

browserSync.init({
server: "./"
});

gulp.watch("./sass/main.scss", ['sass']);
gulp.watch("./*.html").on('change', browserSync.reload);
});

This task is called serve, and we’re creating a server at the root ./.

Then, we’re using gulp.watch to watch our single sass file (note that you can use * for multiple files). If main.scss is changed, it will call the sass method.

We use the same method to watch HTML files, which will reload the browser if it’s updated.

Finally, we have one more simple task to create:

gulp.task('default', ['serve']);

This final task simply means that when gulp is run at the command line within the project folder, it will call the serve task by default.

 

We are ready to Go

It should automatically load up your browser. If so, everything has worked.

You can experiment with the live reloading by making a change and saving to your sass files and html files.

 

You can download the project from Github:

https://github.com/meghsohor/gulp-boilerplate

    munni says:
    November 7, 2018 Reply

    hey this is relay helpful . Thanks for sharing with us

      meghsohor says:
      November 11, 2018 Reply

      Welcome and glad to help

Leave a Reply to munni Cancel reply

Your email address will not be published.