Eccenca common gulp tasks (ecc-gulp-tasks)
A set of common gulp tasks for front-end development
Environment
Before you follow the instructions below, make sure that ecc-gulp-tasks
is up to date.
You may do that by running gulp doctor --self-check
.
If you are sure, you want to update your environment, you can follow these steps:
-
Find out which node packages are installed globally
npm ls -g --depth 0yarn global ls -
Update env
# update nvmrc and nodebash -c "echo "6.9.4" > ~/.nvmrc"nvm install# install latest npm and yarnnpm install --global npm@3.10.10 yarn@0.24.5 -
Reinstall you installed with npm/yarn, for example:
yarn global add gulp eslint ecc-license-checker
Available tasks
bad-mdl
- finds several bad mdl classes. We want to use the ecc-gui-elements instead of using those bad classes directly.build
- compiles optimized (minified, deduped) commonjs version of your component with webpack. Usesconfig.webpackConfig.production
as basic configuration.build-app
- compiles optimized (minified, deduped) application with webpack. Usesconfig.webpackConfig.application
as basic configuration.debug
- compiles debug version of your component with webpack, watches for changes and re-compiles when needed (until interrupted). Usesconfig.webpackConfig.debug
as basic configuration.test
- runs mocha tests starting from file specified atconfig.testEntryPoint
.cover
- runs istanbul to generate test coverage from file specified atconfig.testEntryPoint
.lint
- runs eslint on files specified atconfig.lintingFiles
.licenses-yaml2json
- generates alicenses.json
from alicenses.yaml
file.doctor
- runs several checks in the project. Some of them are fixable by runninggulp doctor --heal
Usage
- Include into your project using
npm i --save-dev ecc-gulp-tasks
- Create
gulpfile.js
looks like this:
var gulp = ; gulp;
As you can see, you need to provide two arguments while requiring the package. First one is an array of string names of available tasks you wish to use. The second one is your build config (described below).
Adding custom gulp tassk
If you need to use your custom gulp tasks after including common ones, you can do it like so:
var gulp = /* ... */;// define task inlinegulp;// load your custom tasks from external filegulp;// ...
How to run things synchonously?
Normally gulp runs everything asynchronously, but sometimes you might want to run tasks in sync. That is useful for example if you want to run tests and then build a component. To do that, you can use gulp-sequence package, like so:
var gulpSequence = ;var gulp = /* ... */;// ....gulp;
Build config
Example build config looks like this:
var path = ;moduleexports = testEntryPoint: path webpackConfig: debug: production: application: common: context: path licenseReport: input: path outputName: 'licenses.json' outputPath: path ;
Exported parameters are as follows:
testEntryPoint
- should point to your test entry point (to be run by mocha)webpackConfig.debug
- should include your webpack config used for debuggingwebpackConfig.production
- should include your webpack config used for compilation for productionwebpackConfig.application
- should include your webpack config used for compilation as production application. It allows for the following special parameters:browsers
: a browserslist definition which is used for css autoprefixingcopyFiles
: a list of copy-webpack-plugin patterns which is used for copying files to the output folderhtml
: a html template for the html-webpack-plugin
webpackConfig.common
- may webpack config thatwebpackConfig.debug
,webpackConfig.production
andwebpackConfig.application
have in commonlicenseReport
- should point to a license yaml file and contain parameters for the generated license report
Javascript flags
There are the following flags set:
__WEBPACK__
is set to true while using gulp build|build-app|debug
.
This may be used for doing things only webpack can do, like requiring style sheets, etc:
if__WEBPACK__
__DEBUG__
is set to true
during gulp debug
.
If you run gulp build-app
, __DEBUG__
is set to false
, effectively stripping all debug statements.
This may be used for doing things only during development:
// The following block will only be run during developmentif__DEBUG__ console
__VERSION__
is set to 'VERSION'
If the environment variable GT_BUILD_VERSION
is set, __VERSION__
will be set to that value.
Otherwise it will be set to the result of git describe --always --dirty
, if that does not fail.
Usage:
const version = <div>__VERSION__</div>;