itcss-boilerplate/gulpfile.js at master · michaelthorne/itcss-boilerplate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const browserSync = require('browser-sync')
const del = require('del')
const gulp = require('gulp')
const gulpStylelint = require('gulp-stylelint')
const gulpSass = require('gulp-sass')
gulpSass.compiler = require('sass');
const util = require('gulp-util')

/*
 * Configuration
 */
let config = {
  dist: !!util.env.dist,
  paths: {
    build: 'build/',
    dist: 'dist/',
    src: 'src/'
  }
}

/*
 * Cleanup build files
 */
function clean () {
  return del([getPath()])
}

/**
 * Get the path of the current environment
 * @returns {string}
 */
function getPath () {
  return config.dist ? config.paths.dist : config.paths.build
}

/*
 * Compile Sass
 */
function sass () {
  let options = {
    outputStyle: 'expanded'
  }

  if (config.dist) {
    options['outputStyle'] = 'compressed'
  }

  return gulp.src(config.paths.src + '**/*.scss')
    .pipe(gulpSass(options).on('error', gulpSass.logError))
    .pipe(gulp.dest(getPath() + '/css'))
}

/*
 * Copy HTML files to build directory
 */
function copy () {
  return gulp.src(config.paths.src + '**/*.html', {
    'base': config.paths.src
  })
    .pipe(gulp.dest(getPath()))
}

// Reload the local server
function reload (done) {
  browserSync.reload()
  done()
}

function lint () {
  return gulp.src('**/07-utilities/_utilities.widths.scss')
    .pipe(gulpStylelint({
      reporters: [
        { formatter: 'string', console: true }
      ]
    }))
}

/*
 * Start a development server
 */
function server (done) {
  if (!config.dist) {
    browserSync.init({
      port: 1337,
      reloadDelay: 250,
      server: getPath()
    })
  }
  done()
}

/*
 * Watch HTML and SCSS files for changes
 */
function watch () {
  gulp.watch(config.paths.src + '**/*.html', gulp.series(copy, reload))
  gulp.watch(config.paths.src + '**/*.scss', gulp.series(sass, reload))
}

let buildTask = gulp.series(clean, sass, copy)
let defaultTask = gulp.series(buildTask, server, watch)

exports.clean = clean
exports.copy = copy
exports.lint = lint
exports.reload = reload
exports.sass = sass
exports.server = server
exports.watch = watch

/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.build = buildTask
exports.default = defaultTask