Sajib Talukder

Step 1:
install gulp-cli globally on your system. It can be install with the following command,
npm install -g gulp-cli

Step 2:
Go to the theme’s root directory and open the terminal. After that run the following commands.
npm init-y
-y flag will skip the questions and automatically created a package.json file.

Now run the following command to install gulp and some dev-dependency tools.
npm install gulp gulp-sass gulp-concat browser-sync --save-dev

Step 3:
Once the dependencies are installed, create a gulpfile.js inside the theme root. Given below is my gulpfile.js

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

// sass to css
gulp.task('sass', function () {
return gulp.src('./assets/sass/main.scss',)
.pipe(sass().on('error', sass.logError))
.pipe(prefix('last 2 versions'))
.pipe(cssbeautify())
.pipe(gulp.dest('./assets/css/'))
.pipe(browserSync.reload({stream: true}))
});

// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
//watch files
var files = [
'./assets/sass/**/*.scss',
'./**/*.php'
];

//initialize browsersync
browserSync.init(files, {
//browsersync with a php server
watchTask: true,
proxy: "http://dev.wp/azino/"
});

});

// Start the livereload server and watch files for change
gulp.task( 'watch', function() {
gulp.watch("./assets/sass/**/*.scss", gulp.parallel('sass') );
} );

// Default task to be run with `gulp`
gulp.task( 'default', gulp.parallel('sass', 'browser-sync', 'watch'));

Now run gulp command line and see the magic.