GulpTasks

[WIP] Gulp Tasks for AccuTheme

Quick Overview

In brief, this is a task/steps breakdown of AccuTheme's Gulp processes: Start, Build, Favicons, Package, and Clean as defined in package.json and /gulpfileDir.

Notes:

• ordered lists will represent tasks running in series.
• unordered lists will represent tasks running in parallel (we don't control the order)
• npm run build is called automatically after npm install is finished running
• npm run build does not finish in a Watch state like npm run start
• the npm run package command is using Webpack

From package.json as of Jan 2022:

  "scripts": {
    "build": "cross-env NODE_ENV=production gulp build",
    "clean": "gulp clean",
    "favicons": "gulp favicons",
    "start": "gulp",
    "postinstall": "gulp build",
    ...
  },

Gulp Start (default)

This launches the default gulp task, which includes the watcher

1. base
   1. clean (Gulp Clean, see below)
   2. copy (/tasks/copy.js) - copies ./node_modules/bootstrap-icons/bootstrap-icons.svg to paths.svg.dist
   3. media (/tasks/media.js)
      • fontsTask (/tasks/media.js) - copies paths.fonts.src to paths.fonts.dist
      • svgTask (/tasks/media.js) - copies paths.svg.srv to paths.svg.dist
      • imagesTask (/tasks/media.js) - copies paths.images.srv, runs through imagemin (gulp-imagemin), saves the results to paths.images.dist
      • videosTask (/tasks/media.js) - copies paths.vdieos.srv to paths.videos.dist
2. compile
   • styles (/tasks/styles.js)
     • skinStylesTask (/tasks/styles.js) - sass compile skin styles
     • moduleStylesTask (/tasks/styles.js) - sass compile module styles
     • containerStylesTask (/tasks/styles.js) - sass compile container styles
   • scripts (/tasks/scripts.js) - webpack using config from /webpack.config.js
3. watch (/tasks/watch.js)

Gulp Build

1. base - same as Gulp Start (above)
2. lintStyles (/tasks/lint.js)
3. compile - same as Gulp Start (above)

Gulp Clean

clean (/tasks/clean.js) - removes all css and *.map files from paths.skin, paths.container, everything from paths.dist, and real-favicon-generator.json

Gulp Favicons

favicons (/tasks/favicons.js)

• generateFavicons - calls generateFavicon from gulp-real-favicon and stores the results in real-favicon-generator.json
• injectFaviconsMarkup - finds the line in meta.ascx that starts with string Favicons = " and replace it with the stringified HTML of generateFavicons output as the variable's value