gulpfile.js

"use strict";

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var server = require("browser-sync").create();

var gulpBemCss = require('gulp-bem-css');


gulp.task("style", function () {
  gulp.src("source/sass/style.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(gulp.dest("source/css"))
    .pipe(server.stream());
});

gulp.task("serve", ["style"], function () {
  server.init({
    server: "source/",
    notify: false,
    open: true,
    cors: true,
    ui: false
  });

  gulp.watch("source/sass/**/*.{scss,sass}", ["style"]);
  gulp.watch("source/*.html").on("change", server.reload);
});

gulp.task('bem-extract', function () {
  return gulp.src('./source/*.html')
    .pipe(gulpBemCss({
      folder: './source/sass/blocks', // Path for creating directories and stylesheet files.
      extension: 'scss', // Extension of stylesheet files
      elementSeparator: '__', // Element separator in class names
      modifierSeparator: '--' // Modifier separator in class names
    }));
});