Yes, this is the relevant gulp config:
/** Combine the parts of ti-template.html
* @param {Function} cb callback
*/
function buildTiTemplate(cb) {
try {
src('src/ti-template/main.html')
.pipe(include())
.pipe(once())
.pipe(rename('customNode.html'))
.pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true }))
.pipe(dest('nodes/ti-template'))
} catch (e) {
console.error('buildTiTemplate failed', e)
}
cb()
}
/** Combine the parts of ti-dummy.html
* @param {Function} cb callback
*/
function buildTiDummy(cb) {
try {
src('src/ti-dummy/main.html')
.pipe(include())
.pipe(once())
.pipe(rename('customNode.html'))
.pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true }))
.pipe(dest('nodes/ti-dummy'))
} catch (e) {
console.error('buildTiDummy failed', e)
}
cb()
}
//#endregion ---- ---- ----
/**
* Watch for changes during development, rebuild as needed
* @param {Function} cb callback
*/
function watchme(cb) {
// Re-pack uibuilderfe if it changes
watch('src/ti-template/*', buildTiTemplate)
watch('src/ti-dummy/*', buildTiDummy)
cb()
}
exports.default = watchme
exports.watch = watchme
The src folder looks like this:
main.html is the template for the Editor html:
<link type="text/css" rel="stylesheet" href="./resources/@totallyinformation/node-red-testbed/ti-common.css" media="all">
<script src="./resources/@totallyinformation/node-red-testbed/ti-common.js"></script>
<script src="./resources/@totallyinformation/node-red-testbed/template.js"></script>
<script type="text/html" data-template-name="ti-template">
<!--=include panel.html -->
</script>
<script type="text/html" data-help-name="ti-template">
<!--=include help.html -->
</script>
Unfortunately, you can't load the help script externally as Node-RED does not recognise it if you do. So the build function simply replaces the <!--=include help.html --> sections with the source files. The htmlmin extension makes the output a bit more compact.
As you can see, I also have not only the Editor JS but also a common Editor library being loaded from resources. This lets me standardise some code and settings across nodes withing the package. And there is a common CSS style library that helps standardise som custom colours, widths & padding, tooltips and emoji.
The common js library adds standard debugging - turns it on by default if you are running on localhost, gives nicer tooltips. Adds an extra property to my own node-types addType which records how the nodes were added. This lets you know whether they were just loaded when the Editor page was loaded, added by a copy/paste or import (important for some nodes that might need to blank certain fields in that case), or were newly added to a flow. Rather more is done in the UIBUIILDER common library, you can check it out here: node-red-contrib-uibuilder/resources/ti-common.js at v6.9.0 Ā· TotallyInformation/node-red-contrib-uibuilder Ā· GitHub.
But it isn't for all of us, there is room for both.
