`hopin-web-build-tools` is a set of build functions used for hopin web projects.
Convert typescript to a node friendly JS file (with minification).
npm install --save-dev @hopin/wbt-ts-node
const path = require('path');
const gulp = require('gulp');
const {setConfig} = require('@hopin/wbt-config');
const tsNode = require('@hopin/wbt-ts-node');
const src = path.join(__dirname, 'src');
const dst = path.join(__dirname, 'build');
setConfig(src, dst);
gulp.task('build',
gulp.series(
'clean',
tsNode.gulpBuild()
)
);
Convert typescript to a browser friendly JS file (with minification).
npm install --save-dev @hopin/wbt-ts-browser
const path = require('path');
const gulp = require('gulp');
const {setConfig} = require('@hopin/wbt-config');
const tsBrowser = require('@hopin/wbt-ts-browser');
const src = path.join(__dirname, 'src');
const dst = path.join(__dirname, 'build');
setConfig(src, dst);
gulp.task('build',
gulp.series(
'clean',
tsBrowser.gulpBuild(// TODO: Add a browser library name)
)
);
If using node modules, you'll want to include the rollup plugins to bundle the modules into your library:
gulp.task('build',
gulp.series(
'clean',
tsBrowser.gulpBuild(// TODO: Add a browser library name, {
rollupPlugins: [
commonjs(),
resolve({
browser: true,
}),
],
})
)
);
Convert modern CSS to an older, optimised CSS file (with minification).
npm install --save-dev @hopin/wbt-css
const path = require('path');
const gulp = require('gulp');
const {setConfig} = require('@hopin/wbt-config');
const css = require('@hopin/wbt-css');
const src = path.join(__dirname, 'src');
const dst = path.join(__dirname, 'build');
setConfig(src, dst);
gulp.task('build',
gulp.series(
'clean',
css.gulpBuild({
preserve: false,
cssVariablesDir: path.join(__dirname, 'src', 'css', 'variables'),
}),
)
);
Inject CSS and JS required to render a page based on the HTML tags, attributes and classnames used.
npm install --save-dev @hopin/wbt-html-assets
const path = require('path');
const gulp = require('gulp');
const html = require('@hopin/wbt-html-assets');
const htmlDir = path.join(__dirname, 'build');
const cssAndJSDir = path.join(__dirname, 'build');
gulp.task('build',
gulp.series(
html.gulpProcessFiles({
htmlPath: htmlDir,
assetPath: cssAndJSDir,
silent: true,
}),
)
);
If you omit the assetPath the script will use the htmlPath.
This gulp function works like so:
- Glob for files with
.htmlextension in thehtmlPathoption value. - Glob for files with
.cssand.jsfile extension in theassetPathvalue. - Each HTML file is parsed for "asset names" which will be the following:
- HTML tags
- CSS classnames
- Attributes
- With the "asset names", it looks for
cssandjsfiles with the same names with an option-inline,-syncand-asyncfile extension. These are then injected into the HTML file.
Let's look at an example.
Imagine we have the HTML file:
<html>
<head>
</head>
<body class="single-page">
<p example-attribute="true">Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
This will pick out the following assets:
- html
- head
- body
- single-page
- p
- example-attribute
If we wanted to style the body element we can create files with either the tag name or class name:
- /static/css/body.css
- /static/css/body-inline.css
- /static/css/body-sync.css
- /static/css/body-async.css
- /static/css/single-page.css
- /static/css/single-page-inline.css
- /static/css/single-page-sync.css
- /static/css/single-page-async.css
Note: A file without the suffix -inline, -sync or -async will be treated as
an inline file. This means body.css and body-inline.css are equivalent.
For inline files, the gulp function will read the contents of the CSS or JS file
and put it into the HTML page in a <style> or <script> tag.
For sync files the gulp function will create a <link> or <script> tag with
the href parameter being an absolute path from the assetPath directory.
For async files js files will be added via a <script> with async and defer.
CSS files are inserted into an inline piece of Javascript that will insert
a <link> once the page has loaded.
Easily delete one or more directories.
npm install --save-dev @hopin/wbt-clean
const path = require('path');
const gulp = require('gulp');
const clean = require('@hopin/wbt-clean');
const htmlDir = path.join(__dirname, 'build');
const cssAndJSDir = path.join(__dirname, 'build');
gulp.task('build',
gulp.series(
clean.gulpClean([htmlDir, cssAndJSDir]),
)
);