customGulpBuild/gulpfile.js at main · vulnerabbity/customGulpBuild · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// gulp
const {src, dest, watch, series, parallel} = require('gulp')
// plugins
const browserSync = require('browser-sync').create()
const sass        = require('gulp-sass')(require('sass'));
const cssMin      = require('gulp-clean-css')
const rename      = require('gulp-rename')
const pug         = require('gulp-pug')
const imagemin    = require('gulp-imagemin')
const del         = require('del')
const newer       = require('gulp-newer')
const autoprefixer= require('gulp-autoprefixer')
const uglify      = require('gulp-uglify-es').default

// paths in 'dir/sub_dir' format
const imagesSrc            = `src/images`
const imagesDest           = `dist/images`

const styleSrc             = `src/scss`
const styleDest            = `dist/css`

const markupSrc            = `src/pug`
const markupDest           = `dist`


const scriptsSrc           = `src/scripts`
const scriptsDest          = `dist/scripts`

const distDir              = `dist`

// liveServer
function browserSyncInit() {
  browserSync.init(
    {
      server : {baseDir: `${distDir}`},
      online: true,
      open: false,
      notify: false,
    }
  )
}

// image manipulations
function images() {
  return src(`${imagesSrc}/**/*`)
  .pipe(newer(`${imagesDest}/`))
  .pipe(imagemin())
  .pipe(dest(`${imagesDest}/`))
}

function cleanImages() {
  return del(`${imagesDest}/**/*`)
}

// converters
//scss to css
function styles() {
  return src([
    `${styleSrc}/**/*.*`,
    `!${styleSrc}/**/_*`
  ])
  .pipe(sass.sync())
  .pipe(autoprefixer({
    overrideBrowserslist: ['last 15 versions'], grid: true
  }))
  .pipe(cssMin())
  .pipe(rename({
    suffix: '.min',
  }))
  .pipe(dest(`${styleDest}/`))
}

function cleanStyles() {
  return del(`${styleDest}/**/*`)
}

//pug to html
function markup() {
  return src([
    `${markupSrc}/**/*.*`,
    `!${markupSrc}/**/_*`
  ])
  .pipe(pug())
  .pipe(dest(`${markupDest}/`))
}

function cleanMarkup() {
  return del(`${markupDest}/**/*.html`)
}

function scripts () {
  return src([
    `${scriptsSrc}/**/*.js`,
    `!${scriptsSrc}/**/_*`
  ])
  .pipe(uglify())
  .pipe(dest(`${scriptsDest}/`))
}

// watch
function watchFiles() {
  //style
  watch([
    `${styleSrc}/*.scss`
  ], styles).on('change', browserSync.reload)
  //markup
  watch([
    `${markupSrc}/*.pug`
  ], markup).on('change', browserSync.reload)
  //scripts
  watch([
    `${scriptsSrc}/**/*.js`
  ], scripts).on('change', browserSync.reload)
  //images
  watch([
    `${imagesSrc}/**/*`
  ], images).on('change', browserSync.reload)
}


// dist
async function buildDist() {
  return parallel(images, styles, markup, scripts)()

}


function cleanDist() {
 return del(`${distDir}/**/*`)
}

async function rebuildDist() {
  return series(cleanDist, buildDist)()
}

// exports

exports.styles             = styles
exports.markup             = markup
exports.liveserver         = browserSyncInit
exports.images             = images
exports.cleanImages        = cleanImages
exports.cleanStyles        = cleanStyles
exports.cleanMarkup        = cleanMarkup
exports.rebuildDist        = rebuildDist
exports.buildDist          = buildDist
exports.cleanDist          = cleanDist

// on start
exports.default = parallel(buildDist, browserSyncInit, watchFiles)