frontend-workflow-gulp/gulpfile.js at master · mahelhelou/frontend-workflow-gulp · 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
const { src, dest, watch, series } = require('gulp')

// Html packages
const pug = require('gulp-pug')

// Styles packages
const sass = require('gulp-sass')(require('sass'))
const autoprefixer = require('gulp-autoprefixer')

// Scripts packages
const terser = require('gulp-terser')
const concat = require('gulp-concat')

// Global packages
const browserSync = require('browser-sync').create()
const rename = require('gulp-rename')
const ghPages = require('gulp-gh-pages')

// Compile pug into Html
function html() {
  return src('app/assets/pug/*.pug')
    .pipe(pug({ pretty: true }))
    .pipe(dest('app'))
}

// Compile sass into CSS
function styles() {
  return src('app/assets/styles/main.scss', { sourcemaps: true })
    .pipe(
      sass({
        errLogToConsole: true,
        onError: browserSync.notify,
        outputStyle: 'compressed',
      })
    )
    .pipe(autoprefixer())
    .pipe(rename('styles.css'))
    .pipe(dest('app/dist', { sourcemaps: '.' }))
    .pipe(browserSync.stream())
}

// Concat and manage scripts
function scripts() {
  const jsPath = {
    jquery: 'app/assets/scripts/libs/jquery.min.js',
    popper: 'app/assets/scripts/libs/popper.min.js',
    owl: 'app/assets/scripts/libs/owl.carousel.min.js',
    bootstrap: 'app/assets/scripts/libs/bootstrap.min.js',
    app: 'app/assets/scripts/app.js',
  }
  // return src([jsPath.jquery, jsPath.popper, jsPath.owl, jsPath.bootstrap, jsPath.app], { sourcemaps: true })
  return src(Object.values(jsPath), { sourcemaps: true })
    .pipe(concat('bundled.js'))
    .pipe(terser())
    .pipe(dest('app/dist', { sourcemaps: '.' }))
    .pipe(browserSync.stream())
}

// BrowserٍٍٍSync serve
function browserSyncServe(done) {
  browserSync.init({
    server: {
      baseDir: './app',
    },
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
  })
  done()
}

// BrowserSync reload
function browserSyncReload(done) {
  browserSync.reload()
  done()
}

// Watch files for changes
function watchFiles() {
  watch('app/assets/pug/**/*.pug', html)
  watch('app/*.html', browserSyncReload)
  watch('app/assets/styles/**/*.scss', series(styles, browserSyncReload))
  watch('app/assets/scripts/**/*.js', series(scripts, browserSyncReload))
}

// Deploy to Github pages
function deploy() {
  return src([
    'app/*.html',
    'app/dist/**/*',
    'app/images/',
    // "app/webfonts",
    // "app/fonts",
  ]).pipe(ghPages())
}

exports.html = html
exports.styles = styles
exports.scripts = scripts
exports.browserSyncServe = browserSyncServe
exports.watchFiles = watchFiles
exports.deploy = deploy

// Default Gulp Task
exports.default = series(html, styles, scripts, browserSyncServe, watchFiles)