SASS gulpfile

inner_pages_gulpfile.js

// структура каталогов проекта
// test_assets:
//   congratulation.png
//   person-min.png
//   person.png
//   ...
// svg-icons
//   arrow-down.svg
//   ....
// fonts
// block
// data
// page
// pug
// scss

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass'),
    rename = require("gulp-rename"),
    pug = require('gulp-pug'),
    data = require('gulp-data'),
    fs = require('fs'),
    path = require('path'),
    svgSymbols = require('gulp-svg-symbols'),
    del = require('del'),
    cssmin = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    purgeSourcemaps = require('gulp-purge-sourcemaps'),
    lazypipe = require('lazypipe')

const DIST = process.env.DIST_BUILD_PATH
const DEV = process.env.DEV_BUILD_PATH

var browsersync_cfg = {
  server: {
    baseDir: DEV,
    directory: true // shows directory listing - index with all files
  },
}

gulp.task('serve', ['sass', 'html:page', 'html:block', 'fonts', 'svg-icons', 'test_assets'], function() {

  browserSync.init(browsersync_cfg)

  gulp.watch("**/*.scss", ['sass']) // browser reloading is not required - CSS injection works well
  gulp.watch("page/**/*.pug", ['html:page-watch'])
  gulp.watch("block/**/*.pug", ['html:block-watch'])
  gulp.watch("fonts/**/*", ['test_assets-watch'])
  gulp.watch("test_assets/**/*", ['test_assets'])
  gulp.watch("svg-icons/**/*", ['svg-icons-watch'])
  gulp.watch("data/data.json", ['html:block-watch', 'html:page-watch'])
})

gulp.task('sass', function() {
  del.sync([
    path.join(DEV, 'css/**/*.css'),
    path.join(DIST, 'css/**/*.css'),
  ], {force: true})

  return gulp.src(["scss/*.scss"])
    .pipe(sourcemaps.init())
    .pipe(sass())

    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.join(DEV, 'css')))
    .pipe(browserSync.stream()) // use CSS injection

    .pipe(purgeSourcemaps())
    .pipe(cssmin()) // Сожмем
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest(path.join(DIST, 'css')))
})

gulp.task('fonts', function() {
  del.sync([
    path.join(DEV, 'fonts'),
    path.join(DIST, 'fonts'),
  ], {force: true})

  return gulp.src(["fonts/**/*"])
    .pipe(gulp.dest(path.join(DEV, 'fonts')))

    .pipe(gulp.dest(path.join(DIST, 'fonts')))
})
gulp.task('fonts-watch', ['fonts'], function (done) {
  // https://www.browsersync.io/docs/gulp
  browserSync.reload();
  done();
})

gulp.task('test_assets', function() {
  del.sync([
    path.join(DEV, 'test_assets'),
  ], {force: true})

  return gulp.src(["test_assets/**/*"])
    .pipe(gulp.dest(path.join(DEV, 'test_assets')))
})
gulp.task('test_assets-watch', ['test_assets'], function (done) {
  // https://www.browsersync.io/docs/gulp
  browserSync.reload();
  done();
})

// initialize a lazypipe for pug translation
var pugTasks = lazypipe()
    .pipe(data, function(file) {
        return requireUncached('./data/data.json')
    })
    .pipe(data, function(file) {
        return JSON.parse(fs.readFileSync('./data/data.json'))
    })
    .pipe(pug, {
        pretty: true
    })

gulp.task('html:page', function() {
  del.sync([
    path.join(DEV, 'pages/**/*.html'),
  ], {force: true})

  return gulp.src('page/**/!(_)*.pug')
    .pipe(pugTasks())
    .pipe(rename({
        dirname: ''
    }))
    .pipe(gulp.dest(path.join(DEV, 'pages')))
})
gulp.task('html:page-watch', ['html:page'], function (done) {
    // https://www.browsersync.io/docs/gulp
    browserSync.reload();
    done();
})

gulp.task('html:block', function() {
  del.sync([
    path.join(DEV, 'block/**/*.html'),
  ], {force: true})

  return gulp.src('block/**/!(_)*.pug')
    .pipe(pugTasks())
    .pipe(rename({
        dirname: ''
    }))
    .pipe(gulp.dest(path.join(DEV, 'block')))
})
gulp.task('html:block-watch', ['html:block'], function (done) {
    // https://www.browsersync.io/docs/gulp
    browserSync.reload();
    done();
})

gulp.task('svg-icons', function () {
  del.sync([
    path.join(DEV, 'icons'),
    path.join(DIST, 'icons'),
  ], {force: true})

  return gulp.src('svg-icons/*.svg')
    .pipe(svgSymbols({
      id: 'icon-%f',
      templates: ['default-svg'] // disables CSS generation
    }))
    .pipe(rename('icons.svg'))
    .pipe(gulp.dest(path.join(DEV, 'icons')))

    .pipe(gulp.dest(path.join(DIST, 'icons')))
})
gulp.task('svg-icons-watch', ['svg-icons'], function (done) {
    // https://www.browsersync.io/docs/gulp
    browserSync.reload();
    done();
})

gulp.task('default', ['serve'])
gulp.task('build', ['sass', 'fonts', 'svg-icons'])

function requireUncached($module) {
    delete require.cache[require.resolve($module)]
    return require($module)
}