Base build process for frontend apps.
Run the following command to install the build dependencies:
cd build-process
npm install
In your project that you want to build create a gulpfile.js and import the base build process as
const NimiqBuild = require(path);where path is a relative path to nimiq-base-gulpfile.js contained in this repository, e.g. '../../meta/build-process/nimiq-base-gulpfile.js'. Then you can call the methods provided by nimiq-base-gulpfile.js within your gulp tasks.
For example:
gulp.task('build', () => NimiqBuild.build('app.js', 'app.css', 'index.html', [], `${__dirname}/../../`, 'dist'));Create a new Nimiq app build. Parameters are given as object with the following properties:
| Parameter | Type | Description |
|---|---|---|
| jsEntry | string | Optional. Entry point for the js from where other js files can be imported. |
| cssEntry | string | Optional. Entry point for the css from where other css files can be imported |
| htmlEntry | string | optional. Entry point for the html which should include <!-- build:css -->, <!-- build:js --> and <!-- build:browser-warning --> |
| assetPaths | Array.<string> | A list of assets that should be copied over to the dist folder. Specified by their path (either absolute to rootPath or relative to the project folder) |
| rootPath | string | The root path of the nimiq project structure. Must be an absolute path (e.g. based on __dirname) |
| distPath | string | Where the output should be written to |
| minify | boolean | Optional. Whether to minify the javascript. |
Returns a gulp stream.
Clean a build folder
| Parameter | Type | Description |
|---|---|---|
| distFolder | string | The folder to delete |
Returns a gulp stream.
Bundle js imports.
| Parameter | Type | Description |
|---|---|---|
| jsEntry | string | Entry point for the js from where other js files can be imported |
| rootPath | string | The root path of the nimiq project structure. Must be an absolute path (e.g. based on __dirname) |
| minify | boolean | Optional. Whether to minify the javascript. |
| collectAssets | boolean | Optional. Collect assets annotated by @asset and add them as a copy to the stream. Paths pointing to that asset will be replaced. |
| distPath | string | Optional. Write the bundled file to this path. |
Returns a gulp stream.
Bundle css imports.
| Parameter | Type | Description |
|---|---|---|
| cssEntry | string | Entry point for the css from where other css files can be imported |
| rootPath | string | The root path of the nimiq project structure. Must be an absolute path (e.g. based on __dirname) |
| collectAssets | boolean | Optional. Collect assets annotated by @asset and add them as a copy to the stream. Paths pointing to that asset will be replaced. |
| distPath | string | Optional. Write the bundled file to this path. |
Returns a gulp stream.
Bundle js and css builds and add a browser warning (from /elements/browser-warning/browser-warning.html.template) into the html.
| Parameter | Type | Description |
|---|---|---|
| htmlEntry | string | The original html file which should include <!-- build:css -->, <!-- build:js --> and <!-- build:browser-warning -->. |
| jsBundle | string | Path to the bundled js file, relative to the output html file. |
| cssBundle | string | Path to the bundled css file, relative to the output html file. |
| rootPath | string | The root path of the nimiq project structure. Must be an absolute path (e.g. based on __dirname) |
| collectAssets | boolean | Optional. Collect assets annotated by @asset and add them as a copy to the stream. Paths pointing to that asset will be replaced. |
| distPath | string | Optional. Write the bundled file to this path. |
Returns a gulp stream.
Copy assets and change paths in html, js and css to relative paths to the copied files.
| Parameter | Type | Description |
|---|---|---|
| assetPaths | Array.<String> | A list of assets that should be copied over to the dist folder specified by their path (either absolute to rootPath or relative to the project folder) |
| htmlStream | Gulp Stream | A gulp stream for the HTML to process |
| jsStream | Gulp Stream | A gulp stream for the JavaScript to process |
| cssStream | Gulp Stream | A gulp stream for the CSS to process |
| rootPath | string | The root path of the nimiq project structure. Must be an absolute path (e.g. based on __dirname) |
| distPath | string | Optional. Write the bundled file to this path. |
Returns the array [assetsStream, htmlStream, jsStream, cssStream].
const gulp = require('gulp');
const NimiqBuild = require('../../meta/build-process/nimiq-base-gulpfile.js');
gulp.task('build', () => NimiqBuild.build({
// jsEntry, cssEntry and htmlEntry only have to be specified if you actually have js/css/html
jsEntry: 'app.js',
cssEntry: 'app.css',
htmlEntry: 'index.html',
assetsPaths: ['images/image.png'],
rootPath: `${__dirname}/../../`,
distPath: 'dist'
}));
gulp.task('clean', () => NimiqBuild.cleanBuild('dist'));