How to build scss using gulp?

Question

Sass

There is such a template - link
It turns out they were sold in this format, there is a set of scss files and the output is the usual css assembled from them.
There is a file gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    bs = require('browser-sync'),
    svgstore = require('gulp-svgstore'),
    svgmin = require('gulp-svgmin'),
    rename = require('gulp-rename'),
    inject = require('gulp-inject'),
    watch = require('gulp-watch'),
    path = 'design/furniture_v1/';

gulp.task('sprite', function () {
  var iconPath = path + 'images/icon/',
      svgs = gulp
        .src(iconPath + 'sprite/*.svg')
        .pipe(svgmin())
        .pipe(rename({prefix: 'icon-'}))
        .pipe(svgstore({ 
          inlineSvg: true 
        }));
  function fileContents (filePath, file) {
    return file.contents.toString();
  }
  return gulp
    .src(iconPath + '_svg.tpl')
    .pipe(inject(svgs, { 
      transform: fileContents 
    }))
    .pipe(gulp.dest(path+'html'));
});

/*задача для эмуляции сервера*/
gulp.task('bs', function(){
  bs({
    proxy: 'furniture-shop.loc',
    port: 433,
    notify: false
  });
});

/*задача для компиляции css*/
gulp.task('sass', function(){
  return gulp.src(path+'scss/**/*.scss')
    .pipe(sourcemaps.init()) // нициализируем sourcemaps
    .pipe(sass({
      outputStyle: 'compressed' // минифицируем компилируемый css
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['> 5%', 'last 2 versions', 'ie >= 10'] // добавляем вендорные префиксы
    }))
    .pipe(sourcemaps.write('.')) //сохраняем sourcemap файлы в ту же директорию, что и css
    .pipe(gulp.dest(path+'css/'))
    .pipe(bs.reload({stream: true}));
});

/*Задача на отслеживание изменений*/
gulp.task('watch', ['sass', 'bs'], function(){
  gulp.watch(path+'scss/**/*.scss', ['sass']);
  gulp.watch(path+'js/**/*.js').on('change', bs.reload);
  gulp.watch(path+'html/*.tpl').on('change', bs.reload);
  gulp.watch(path+'lang/*.php').on('change', bs.reload);
  gulp.watch('../compiled/**/*.php').on('change', bs.reload);
});

gulp.task('default', ['bs', 'sass', 'watch']);

The question is how to run this gulp so that it collects all scss together? I am offered to edit the source in css, but I would like to edit the code in scss and already build it.

Answer 1

Try typing gulp in the console, it should start the server, build sass and start tracking changes.
But keep in mind that the old gulp is used here, and if you have a new node.js, then there will be an error. We'll have to update gulp and fix a bit of tasks.