Left file: appwork-v1_4_0/react-starter/gulpfile.js  
Right file: appwork-v1_5_0/react-starter/gulpfile.js  
1 const path = require('path') = 1 const path = require('path')
2 const { src, dest, series, watch } = require('gulp')   2 const { src, dest, series, watch } = require('gulp')
3 const gulpSass = require('gulp-sass')   3 const gulpSass = require('gulp-sass')
4 const gulpAutoprefixer = require('gulp-autoprefixer')   4 const gulpAutoprefixer = require('gulp-autoprefixer')
5 const gulpSourcemaps = require('gulp-sourcemaps')   5 const gulpSourcemaps = require('gulp-sourcemaps')
6 const del = require('del')   6 const del = require('del')
7     7  
    -+ 8 gulpSass.compiler = require('node-sass')
      9  
8 // ------------------------------------------------------------------------------- = 10 // -------------------------------------------------------------------------------
9 // Utilities   11 // Utilities
10     12  
11 function normalize(p) {   13 function normalize(p) {
12   return p.replace(/\\/g, '/')   14   return p.replace(/\\/g, '/')
13 }   15 }
14     16  
15 function root(...p) {   17 function root(...p) {
16   const paths = p.map(_p =>   18   const paths = p.map(_p =>
17     _p.startsWith('!') ?   19     _p.startsWith('!') ?
18       normalize(`!${path.join(__dirname, _p.slice(1))}`) :   20       normalize(`!${path.join(__dirname, _p.slice(1))}`) :
19       normalize(path.join(__dirname, _p)))   21       normalize(path.join(__dirname, _p)))
20   return paths.length === 1 ? paths[0] : paths   22   return paths.length === 1 ? paths[0] : paths
21 }   23 }
22     24  
23 // -------------------------------------------------------------------------------   25 // -------------------------------------------------------------------------------
24 // Sass task factory   26 // Sass task factory
25     27  
26 const buildCss = function ({ sourcemaps, minify }) {   28 const buildCss = function ({ sourcemaps, minify }) {
27   let pipeline = src(root('src/vendor/styles/**/*.scss', '!src/vendor/styles/**/_*.scss', '!src/vendor/styles/pages/**/*.scss'), {   29   let pipeline = src(root('src/vendor/styles/**/*.scss', '!src/vendor/styles/**/_*.scss', '!src/vendor/styles/pages/**/*.scss'), {
28     base: root('src/vendor/styles')   30     base: root('src/vendor/styles')
29   })   31   })
30     32  
31   if (sourcemaps) {   33   if (sourcemaps) {
32     pipeline = pipeline.pipe(gulpSourcemaps.init())   34     pipeline = pipeline.pipe(gulpSourcemaps.init())
33   }   35   }
34     36  
35   pipeline = pipeline.pipe(gulpSass({   37   pipeline = pipeline.pipe(gulpSass({
36     outputStyle: minify ? 'compressed' : 'nested'   38     outputStyle: minify ? 'compressed' : 'nested'
37   }).on('error', gulpSass.logError))   39   }).on('error', gulpSass.logError))
38     40  
39   pipeline = pipeline.pipe(gulpAutoprefixer({   41   pipeline = pipeline.pipe(gulpAutoprefixer({
40     overrideBrowserslist: require('./package.json').browserslist,   42     overrideBrowserslist: require('./package.json').browserslist,
41     cascade: !minify   43     cascade: !minify
42   }))   44   }))
43     45  
44   if (sourcemaps) {   46   if (sourcemaps) {
45     pipeline = pipeline.pipe(gulpSourcemaps.write('.'))   47     pipeline = pipeline.pipe(gulpSourcemaps.write('.'))
46   }   48   }
47     49  
48   return pipeline.pipe(dest(root('public/vendor/css')))   50   return pipeline.pipe(dest(root('public/vendor/css')))
49 }   51 }
50     52  
51 // -------------------------------------------------------------------------------   53 // -------------------------------------------------------------------------------
52 // Build tasks   54 // Build tasks
53     55  
54 const buildSassProdTask = function () {   56 const buildSassProdTask = function () {
55   return buildCss({ minify: true })   57   return buildCss({ minify: true })
56 }   58 }
57     59  
58 const cleanTask = function () {   60 const cleanTask = function () {
59   return del([root('public/vendor/css')], {   61   return del([root('public/vendor/css')], {
60     force: true   62     force: true
61   })   63   })
62 }   64 }
63     65  
64 const buildTask = function () {   66 const buildTask = function () {
65   return buildCss({ sourcemaps: true })   67   return buildCss({ sourcemaps: true })
66 }   68 }
67     69  
68 const buildProdTask = series(   70 const buildProdTask = series(
69   cleanTask,   71   cleanTask,
70   buildSassProdTask   72   buildSassProdTask
71 )   73 )
72     74  
73 // -------------------------------------------------------------------------------   75 // -------------------------------------------------------------------------------
74 // Watch task   76 // Watch task
75     77  
76 const watchTask = function () {   78 const watchTask = function () {
77   watch(root(   79   watch(root(
78     'src/vendor/styles/**/*.scss',   80     'src/vendor/styles/**/*.scss',
79     '!src/vendor/styles/**/_*.scss'   81     '!src/vendor/styles/**/_*.scss'
80   ), buildTask)   82   ), buildTask)
81 }   83 }
82     84  
83 // -------------------------------------------------------------------------------   85 // -------------------------------------------------------------------------------
84 // Exports   86 // Exports
85     87  
86 module.exports = {   88 module.exports = {
87   cleanup: cleanTask,   89   cleanup: cleanTask,
88   build: buildTask,   90   build: buildTask,
89   'build-prod': buildProdTask,   91   'build-prod': buildProdTask,
90   watch: watchTask   92   watch: watchTask
91 }   93 }