hub.common.tooling

How to use hub.common.tooling version 2.8.0+, and all available gulp tasks.

Package Details#

This package includes a common set of gulp build tools for Hub v1 and HubCommon. For a quick start and usage instructions, head over to HubBoilerplate.

Dependencies#

  • node >= 8.11.4 || ^10.0 || 12.0
  • hubcommon >= 5.8.0

Supports#

  • typescript 2.x
  • browsers:
"browserslist": "last 2 versions, > 1%, not dead"

That means we support:

  • the last 2 versions for each browser OR
  • more than 1% browsers versions selected by global usage statistics OR
  • browsers without official support or updates for 24 months.

Uses#

  • gulp 4.x
  • Handlerbars 4.7
  • @iqmetrix/hub-dev-server 2.5
  • Babel 7.x with:
"dependencies": {
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-modules-amd",
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
}

Installation#

To use this package, you need to install the @iqmetrix/hub.common.tooling as a dev dependency:

npm install @iqmetrix/hub.common.tooling --save-dev

and have the .npmrc file configured.

hub-scripts#

hub-scripts are cli tool for hub.common.tooling, introduced in version 2.5.0.

Upgrading to hub.common.tooling 2.0#

This new version of the hub.common.tooling helps developers to update their Hub v1 apps to newer versions of HubCommon and Hub.Common.Tooling. See upgrading guide to upgrade to tooling 2.x.x.

Add the necessary scripts#

Add the following into your package.json

"scripts": {
"build": "hub-scripts build",
"postinstall": "npx bower install --config.interactive=false",
"prod": "hub-scripts start --prod",
"serve:prod": "hub-scripts serve --prod",
"start": "hub-scripts start"
}

And then, you can run

npm start

CLI options#

  • help: Shows the help menu
  • version: Shows the current version. Alias: -v
  • start: Start your application in dev mode
    • Additional Options:
      • --no-shell: Executes START script without the Shell in dev mode
      • --prod: Executes START script in prod mode (what you will see in INT)
  • serve: Serve your application from devTemp folder (no pre-build, normmally used to run tests)
  • serve --prod: Serve your application from build folder (no pre-build, normmally used to run tests)
  • build: Build your application for production using RequireJS
  • task: Execute one of the avaliable GULP tasks
    • Avaliable tasks:
      • --lint: Parse the code using ESLINT
      • --handlebars: Re-generate the template.js file using HandleBars
      • --pug: Convert all jade template files into pug files
      • --bump: Bump your application. The default is a minor version. Can use --bump:major or --bump:patch

Gulp tasks#

To run these commands, you need to have gulp@4 installed globally

npm i -g gulp@4

gulp and gulp -n#

gulp
  • Run the hub v1 app without the shell on http:localhost:3000
  • Run the hub-dev-server (using hub v2 shell) on http:localhost:9000/#dev
gulp -n
  • Run the app under port 9000 without the shell.

gulp bump#

Bump the version number and generate the correct tag.

gulp bump || gulp bump:major || gulp bump:patch

followed by

git push && git push --tags

By default gulp bump increments the minor version.

gulp serve#

Creates a dev server instance at http://localhost:9000

gulp serve

OR

gulp serve:shell
  • runs on port 3000
gulp serve:noshell
  • runs on port 9000

gulp buildRequireJs#

Optimize and process files for build. Creates build info and cleans build folder.

gulp buildRequireJs

gulp toPug#

Rename all jade templates to pug templates.

gulp toPug

gulp eslint#

Formats your javascript files using the default ESLint formatter

gulp eslint

gulp gitRename#

Rename files to follow lowerCamelCase where the first letter of the entire word is lowercase, but subsequent first letters are uppercase.

gulp gitRename

gulp proxy#

Runs a webserver (with LiveReload) and creates a proxy middleware

gulp proxy

gulp stripBom#

Strip UTF-8 byte order mark (BOM) from a string. The Unicode Standard permits the BOM in UTF-8, but does not require nor recommend its use.

gulp stripBom

Deploy#

Testing before deploy#

Before you can deploy your upgraded app you need to make sure it works and nothing is missing:

  • To test if your deploy will work, you just need to run the following command npm run prod
  • Make sure to note how the app works and looks before you deploy the new version.
    • Check if all UI components are still in place
    • Check if all user flows still work (saving, deleting, routing, etc.)
    • It is your responsibility to make sure the app has been tested. You can always reach out for help from iQ employees that know and/or use the app

Updating your TeamCity deploy#

We already added a new step in the Hub Building Template called 2. The right version of GULP and it will also be present in the build phase of your app. Follow the below steps if you are using the tooling version 2.0.0+

  1. Open your Project settings
  2. Open your Build phase settings
  3. Navigate to the menu Build Steps
  4. Click to edit the step 2. Right version of GULP
  5. Replace the install gulp@3 -g with install gulp@4 -g
  6. Save the settings and run your build

Azure DevOps Pipelines#

Starting on Hub.Common.Tooling 2.5.0+ and HubCommon 5.6.5+ you can build your apps using Azure Pipelins intead of TeamCity. Check the releavant Build And Release documentation

Sources#

Last updated on by Garrett Smith