@joinbox/build-task

Re-usable gulp 4 based build tasks for Joinbox projects

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
06Jun 3, 2021Jan 18, 2018Minified + gzip package size for @joinbox/build-task in KB

Readme

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 live

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 live"
    },
    

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.