frontend-starter-kit/gulpfile.js at master · devthnote/frontend-starter-kit · 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
const { src, dest, watch, series, parallel } = require('gulp');
const cheerio = require('gulp-cheerio'); // Jquery syntax
const imagemin = require('gulp-imagemin');
const pug = require('gulp-pug'); //temlating
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const sass = require('gulp-sass')(require('sass')); //theming
const sourcemaps = require('gulp-sourcemaps');
const svgmin = require('gulp-svgmin'); // svg minification
const svgstore = require('gulp-svgstore'); // svg combine
const terser = require('gulp-terser');
//postCSS stuff
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcssNormalize = require('postcss-normalize');
// Files Paths
const paths = {
  cache: {
    src: ['./dist/**/*.html'],
    dest: './dist/',
  },
  images: {
    src: ['./src/images/**/*'],
    svg: ['./src/svg/**/*'],
    dest: './dist/assets/images/',
  },

  scripts: {
    src: ['./src/scripts/**/*.js'],
    dest: './dist/assets/',
  },
  theme: {
    src: ['./src/theme/**/*.+(scss|sass)'],
    dest: './dist/assets/',
  },
  views: {
    src: ['./src/templates/views/*.pug'],
    dest: './dist/',
  },
};

function cacheCleaner() {
  return src(paths.cache.src)
    .pipe(replace(/cache=\d+/g, 'cache=' + new Date().getTime()))
    .pipe(dest(paths.cache.dest));
}

function imgOptimizer() {
  return src(paths.images.src)
    .pipe(imagemin().on('error', (error) => console.log(error)))
    .pipe(dest(paths.images.dest));
}


function pageBuilder() {
  return src(paths.views.src)
    .pipe(pug({pretty: true,}))
    .pipe(dest(paths.theme.dest));
}

function scriptsBuilder() {
  return src(paths.scripts.src)
  .pipe(sourcemaps.init())
  .pipe(terser().on('error', (error) => console.log(error)))
  .pipe(rename({ suffix: '.min' }))
  .pipe(sourcemaps.write('.'))
  .pipe(dest(paths.scripts.dest));
}

function themeBuilder() {
  var plugins = [
    postcssNormalize(),
    autoprefixer(),
    cssnano()
  ];
  return src(paths.theme.src)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(paths.theme.dest));
}

function svgSpriter() {
  return src(paths.images.svg)
      .pipe(svgmin())
      .pipe(svgstore({
        fileName: 'sprite.svg',
      }),
      )
      .pipe(
        cheerio({
          run: function($) {
            $('[fill]').removeAttr('fill');
          },
          parserOptions: {
            xmlMode: true,
          },
        }),
      )
      .pipe(dest(paths.images.dest));
}

function watcher() {
  watch(paths.images.src, imgOptimizer);
  watch(paths.images.svg, svgSpriter);
  watch(paths.scripts.src, parallel(scriptsBuilder, cacheCleaner));
  watch(paths.theme.src, parallel(themeBuilder, cacheCleaner));
  watch(paths.views.src, series(pageBuilder, cacheCleaner));
}

exports.imgOptimizer = imgOptimizer;
exports.pageBuilder = pageBuilder;
exports.cacheCleaner = cacheCleaner;
exports.scriptsBuilder = scriptsBuilder;
exports.svgSpriter = svgSpriter;
exports.themeBuilder = themeBuilder;
exports.watcher = watcher;
exports.default = series(
  parallel(imgOptimizer, svgSpriter, pageBuilder, scriptsBuilder, themeBuilder),
  cacheCleaner, watcher);