Sass + Gulp + browserSync

Sep 4, 2017

This is nothing, just workflow for sass :smile: . I am using Linux in this setup.

Install node js.
Open terminal, make a new directory, open it.

mkdir sass-workflow
cd sass-workflow

Init package.json file.

npm init

Open package.json file. Change this line

"scripts": {
    "test": ""
  }

to this

 "scripts": {
    "start": "gulp"
  }

Install gulp, sass, and browserSync.

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

In the root directory, create a folder and file for sass src/sass/style.scss. Write something in there, like this :smile:

$bg-color: teal;
body {
background-color: $bg-color;
}

In the root directory, create a new file called gulpfile.js. Write this for importing gulp, compile sass with gulp, and use auto reload for browser-sync.

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');


//Compile sass
gulp.task('sass', function(){
    return gulp.src(['src/sass/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
});

//Watch
gulp.task('serve', ['sass'], function(){
    browserSync.init({
        server: './src'
    });

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

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

To run that file again install gulp-cli.

npm install -g gulp-cli

Create a new file in src/index.html. And write the basic html code that link with css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sass Workflow</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>   
</body>
</html>

Run gulp with

npm start

It will compiling the css file, run the browser automatically and use auto reload immediately when the change made.

Sass + Gulp + browserSync

Related Posts