GULP. SCSS. Налаштування оточення

1. Встановити NODEJS
2. Встановлення gulp-cli npm i-g gulp-cli
3. У корені проекту ініціалізуємо package.js файл командою npm init
4. Встановлюємо gulp у проект npm i gulp --save-dev
5. У корені проекту створюємо файл gulpfile.js
6. Встановлення модулів npm install gulp-sass gulp-plumber gulp-autoprefixer browser-sync
7. Заповнюємо gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');

8. Пишем таски в gulpfile.js

// До версії gulp 4
gulp.task('sass', function () {
  return gulp.src('scss/style.scss')
      .pipe(plumber())
      .pipe(sourceMaps.init())
      .pipe(sass())
      .pipe(autoprefixer({
        browsers: ['last 2 versions']
      }))
      .pipe(sourceMaps.write())
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('html', function () {
  return gulp.src('*.html')
      .pipe(gulp.dest('build'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('serve', ['html', 'sass'], function () {
  browserSync.init({
    server: "build"
  });

  gulp.watch("scss/**/*.scss", ["sass"]);
  gulp.watch("*.html", ["html"]);
});


// Для версії gulp 4
function css() {
    return gulp.src('scss/style.scss')
        .pipe(plumber())
        .pipe(sourceMaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 2 versions']
        }))
        .pipe(sourceMaps.write())
        .pipe(gulp.dest('build/css'))
        .pipe(browserSync.reload({stream: true}));
}

function html() {
    return gulp.src('*.html')
        .pipe(gulp.dest('build'))
        .pipe(browserSync.reload({stream: true}))
}

function serve(){
    browserSync.init({
        server: "build"
    });

    gulp.watch(["scss/**/*.scss"], css);
    gulp.watch(["*.html"], html);
}

exports.css = css;
exports.html = html;
exports.serve = serve;
exports.default = gulp.parallel(css, html, serve);

9. Запускаємо gulp до 4 gulp serve для gulp