whiplash/gulpfile.js at master · jonwalch/whiplash · 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
116
117
118
119
120
121
122
123
124
const gulp = require('gulp')
const merge = require('merge-stream')
const del = require('del')
const gulpStylelint = require('gulp-stylelint')
const sourcemaps = require('gulp-sourcemaps')
const postcss = require('gulp-postcss')
const path = require('path')
const concat = require('gulp-concat')
const beautify = require('gulp-beautify')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const connect = require('gulp-connect')
// const hash = require('gulp-hash-filename');

const paths = {
  css: {
    all: './resources/css/**/*.css',
    src: './resources/css/style.css',
    dest: './resources/public/css',
    output: './resources/public/css/App.css'
  },
  images: {
    src: './resources/img/**/*',
    dest: './resources/public/img'
  }
}

function clean (cb) {
  del([paths.css.dest])

  return cb()
}

function css () {
  const settings = {
    config: {
      extends: ['stylelint-config-standard'],
      rules: {
        "no-descending-specificity": null,
        "property-no-unknown": null,
        "selector-pseudo-class-no-unknown": null
      }
    },
    fix: true,
    reporters: [
      { formatter: 'string', console: true }
    ]
  }

  const plugins = [
    require('postcss-easy-import'), // @import files
    require('precss'), // Transpile Sass-like syntax
    require('postcss-preset-env'), // Polyfill modern CSS
    require('autoprefixer'), // Add vendor prefixes
    require('pixrem')() // Add fallbacks for rem units
  ]

  const lint = gulp.src(paths.css.all)
    .pipe(gulpStylelint(settings))

  const build = gulp.src(paths.css.src)
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(concat('App.css')) // Concatenate and rename
    .pipe(beautify.css({ indent_size: 2 })) // Beautify
    .pipe(sourcemaps.write('.')) // Maintain Sourcemaps
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())

  const merged = merge(lint, build)

  return merged.isEmpty() ? null : merged
}

function minify () {
  const css = gulp.src(paths.css.output)
    // .pipe(hash({
    //   "format": "{name}.{hash}{ext}"
    //  }))
    // .pipe(gulp.dest(paths.css.dest))
    // TODO: remove old App.css that is still hanging around
    .pipe(sourcemaps.init())
    .pipe(postcss([require('cssnano')])) // Minify
    .pipe(sourcemaps.write('.')) // Maintain Sourcemaps
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())

  return css
}

function images () {
  const images = gulp.src(paths.images.src)
    // TODO (paulshryock): Add image processing
    .pipe(gulp.dest(paths.images.dest))
    .pipe(connect.reload())

  return images
}

function watch (cb) {
  gulp.watch([paths.css.all], css)
  gulp.watch([paths.images.src], images)

  cb()
}

/**
 * Gulp tasks
 */
const develop = gulp.series(
  clean,
  css,
  images
)

const build = gulp.series(
  develop,
  minify
)

exports.develop = develop
exports.watch = gulp.series(develop, watch)
exports.build = build
exports.default = build