@joinbox/build-task

Intro

Re-usable Gulp 4 tasks for Joinbox projects that provide reasonable defaults for the following file types:

• scripts
• styles
• images (TBD)
• clear dist directory (TBD)

All tasks support:

• BrowserSync
• notifications

Scripts support:

• inlining of imports/exports (via rollup.js)
• backwards compatibility (via Babel, including object properties and private class fields)
• minification (via terser)
• automatically adds core-js polyfills when needed (via useBuildIns: 'usage')
• source maps

Styles support:

• SASS conversion to CSS (via node-sass)
• glob support for SASS imports
• auto prefixes
• source maps

Usage

1. Install task and peer dependencies: npm i -D @joinbox/build-task browser-sync gulp babel-eslint
2. Copy the contents of the provided gulpfile.js to your project
3. Change import path: { buildJavaScript, buildStyles } = require('@joinbox/build-task')
4. Modify paths where needed
5. Run npx gulp (for dev task) and npx gulp prod

Tests

• Run `npm test``
• If you run a test manually, make sure to use the --serial option as we are relying on the file system for our tests

Migrate from v0.x to v1.x

​

gulpfile.js

• Copy gulpfile from here or another project
• Update proxy-url ​

package.json:

• Change @joinbox/build-task to newest version
• Remove node-sass and all other dependencies of the previous build task
• Remove @babel/polyfill, regenerator-runtime/runtime
• Make sure you NOT use core-js v2; use v3 (which should not be necessary, as it is compiled into your dist files by the build task)
• Replace scripts with

  "scripts": {
      "start": "npx gulp",
      "build": "npx gulp prod"
  },
  

main.js

• Remove @babel/polyfill, regenerator-runtime/runtime and core-js/stable. They are replaced by the task's useBuiltIns: true which compiles core-js into the dist files where needed ​

console

• Install all dependencies that are required in your current gulpfile.js

  npm i --save-dev postcss del imagemin
  

• Delete current modules: rm -r node_modules
• Install modules: npm i
• npm start

Migrate from v1.x to v2.x

Main change is the update from Node Sass to Dart Sass which comes with a breaking change for SASS files: One must use math.div instead of /. There's an auto migrate plugin.