Sass + Gulp + browserSync

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

  1. Install node js.
  2. Open terminal, make a new directory, open it.
mkdir sass-workflow
cd sass-workflow
  1. Init package.json file.
npm init

Open package.json file. Change this line

"scripts": {
    "test": ""

to this

 "scripts": {
    "start": "gulp"
  1. Install gulp, sass, and browserSync.
npm install gulp gulp-sass browser-sync --save-dev
  1. 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;
  1. 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'])

gulp.task('serve', ['sass'], function(){
        server: './src'

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

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

  1. To run that file again install gulp-cli.
npm install -g gulp-cli
  1. Create a new file in src/index.html. And write the basic html code that link with css.
<!DOCTYPE html>
<html lang="en">
    <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">
  1. Run gulp with
npm start

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