@biotope/build
Advanced tools
Build Package for biotope-boilerplate.
All biotope-build options can be set in local /projectConfig.js (<5.x /projectConfig.json)
See default config: https://github.com/biotope/biotope-build/blob/master/config.js
{
<String> src: src, //base folder for all the project files, defaults to 'src'
<String> dev: dev, //temporary folder for all files that get created in the serve/build process, defaults to '.tmp'
<String> dist: dist, //build folder for the finalized files when running a build process, defaults to 'dist'
<String> node: node, //node_modules base folder, defaults to 'node_modules'
<String> cwd: cwd, //process.cwd(), current working dir of node project ###TODO should maybe be private###
<boolean> isWin: isWin, //checks the os and sets the variable to true if running on a windows system
<boolean> debug: false, //toggle debbuging prompts from the tasks (static:hb, browserConfig, partialHelper), default is false
<String> dataObject: 'data' //name of the global data object, which can be used in static handlebars templates via {{data.key}}
<String> resources: '/resources', //resource folder inside the src folder, needed to run multiple tasks
<String> components: '/components' //component folder corresponding to the resource folder
<String> handlebarsHelper: '/js/handlebars.helper.js', //path to dynamic handlebar helpers relative to the resources folder
<Object> tasks: {}, //see tasks
<Object> externalResources: {} //see external resources
<Object> bowerResources: {} //see bower resources
}
You can toggle certain task in biotope-build. Every Task can be configurated with a boolean.
This list shows the configurable tasks as well as a brief description about what they do.
{
browserSupport: true, //creates an overview of the support browser from a *.json file
cleanCss: true, //minify CSS files for build
cssStats: true, //checks the maximum selectors in each css file, fails if there are more than 4096 (IE 9 issue)
favicons: true, //creates and embeds the favicons as well as the mobile icons from an image, default image root is '/resources/'
handlebars: true, //creates dynamic handlebar templates from hbs files, static page generation is handled in a seperate task
iconfont: true, //creates the iconfont from svg images, default icon path is '/resources/icons'
image: true, //compress images stores in '/resources/img'
linting: true, //linting of js/ts/scss files
sass: true, //disables the sass compiler, disabled if you use vanilla css
uglify: true, //uglifies js files in the build
webpack: true //compiles typescript and transpiles ES6 Code in *.ts files
}
If you use external resources for the final build you can add those with this object. The module name references the module inside the node_modules folder. The file name needs to be relative to the module.
JS files then get copied to '.tmp/resources/js/vendor/', CSS files to '.tmp/resources/css/vendor/'. When using scss files, reference the node_modules folder directly from there.
{
'moduleName': 'singleFile.ext',
'otherModuleName': ['firstFile.ext', 'folder/secondFile.ext2'],
}
Autoprefixer uses the .browserlistrc file from your projects root, or otherwise default options Repo: https://github.com/postcss/autoprefixer#options
Set the file path to the corresponding *.json file to create a browser support overview.
browserSupport: {
file: cwd + '/browserSupport.json'
},
Check dependencies only uses default options. Repo: https://github.com/mgol/check-dependencies
Clean CSS uses default options with rebase set to false to prevent rewriting file paths. Repo: https://www.npmjs.com/package/gulp-clean-css Repo: https://github.com/jakubpawlowicz/clean-css
cleanCss: {
rebase: false
},
cssStats exits on error in order to break the build process. Repo: https://github.com/cssstats/gulp-cssstats
cssstats: {
exit: true
},
Set the port and the folders being watch for connect/livereload. Repo: https://github.com/avevlad/gulp-connect
connect: {
port: 9000,
globs: [
dev + '/**/*.*',
src + '/resources/js/**/*.js',
src + '/resources/bower_components/**/*',
src + '/_mock/**/*',
src + '/_config/**/*',
'!' + dev + '/_mock/**/*',
'!' + dev + '/_config/**/*',
'!' + dev + '/_assets/**/*',
'!' + dev + '/resources/js/vendor/**/*.js',
'!' + dev + '/resources/css/**/*.map',
'!' + dev + '/resources/bower_components/**/*',
'!' + dev + '/resources/js/handlebars.templates.js'
]
},
This creates all the favicons and a manifest.json from an image file. Repo: https://github.com/evilebottnawi/favicons
favicons: {
appName: "gulp-frontend-boilerplate",
background: "#020307",
path: "favicons/",
display: "standalone",
orientation: "portrait",
version: 1.0,
logging: false,
online: false,
html: "htmlhead.favicons.html",
pipeHTML: true,
replace: true,
icons: {
appleStartup: false
}
},
Dynamic handlebar templates and partials get created and added to a namespace. Repo: https://github.com/lazd/gulp-handlebars
handlebars: {
templateWrap: 'Handlebars.template(<%= contents %>)',
partialWrap: 'Handlebars.registerPartial(<%= processPartialName(file.relative) %>, Handlebars.template(<%= contents %>));',
namespace: 'ffglobal.configuration.data.tpl',
noRedeclare: true
},
Icon font settings are split into gulp-svgicons2svgfont settings and the path settings. Repo: https://github.com/nfroidure/gulp-svgicons2svgfont
iconfont: {
fontName: 'Icons',
prependUnicode: true,
timestamp: Math.round(Date.now() / 1000),
normalize: true
},
iconfontCss: [
{
fontName: 'Icons',
path: src + '/resources/scss/fonts/iconfont/_icons.scss',
targetPath: '../../../../.iconfont/_icons.scss',
fontPath: '../fonts/icons/',
cssClass: 'icon'
}, {
fontName: 'Icons',
path: src + '/resources/scss/fonts/iconfont/_iconStyles.scss',
targetPath: '../../../../.iconfont/_iconStyles.scss',
fontPath: '../fonts/icons/',
cssClass: 'icon'
}
],
Minifiy the images inside "/resources/img". Repo: https://github.com/sindresorhus/gulp-imagemin
image: {
verbose: true
},
Force line-endings to 'LF' formatting to create unification across platform. Repo: https://github.com/iShafayet/gulp-line-ending-corrector
lec: {
verbose: false,
eolc: 'LF',
encoding: 'utf8'
},
Specifies the port for using livereload. Runs with connect. See connect settings.
livereload: {
port: 35729
},
Runs modernizr tests and creates polyfills. Repo: https://github.com/doctyper/gulp-modernizr Options: https://github.com/Modernizr/customizr#config-file
modernizr: {
options: [
"setClasses",
"addTest"
],
excludeTests: [
'hidden'
]
},
Sass compiler based on node-sass. Repo: https://github.com/dlmanning/gulp-sass Options: https://github.com/sass/node-sass#options
sass: {
includePaths: []
},
Linting of sass files. Default options. Rules need to be defined. Repo: https://github.com/sasstools/gulp-sass-lint
sassLint: {},
Javascript uglification settings. Repo: https://github.com/terinjokes/gulp-uglify
uglify: {
preserveComments: 'license',
sourcemaps: false,
folders: ['js', 'ts'],
ignoreList: []
},
Watch task uses polling on windows system, therefore the interval is increased to reduce cpu usage. Repo: https://github.com/floatdrop/gulp-watch
watch: {
usePolling: isWin,
interval: (isWin ? 250 : 100)
},
Add files to an ignoreList, set path relative to src path. Webpack settings are set via webpack.config.js Repo: https://github.com/webpack/webpack
webpack: {
ignoreList: []
}
There are other tasks in use, but they can not be modified via a projectConfig.js file. If this is needed please open an issue or send a pull request.
npmnpmnpm link in @biotope/build reponpm link @biotope/build in biotope-boilerplate reponpm unlink in @biotope/build reponpm unlink @biotope/build in biotope-boilerplate reponpm in biotope-boilerplate repoIf you encounter errors, please submit an issue.
FAQs
Develop and build system for Biotope Web Components Ecosystems
We found that @biotope/build demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.