The best tool for Contactlab projects builds 🚀
Kubozer is a wrapper of some tools for building production (and development) application written in Polymer 1.x. and ESnext syntax.
- Copy whatever files you need into your
build
directory - Replace part of the
html
files where needed (like change the link within the index.html to your production-ready script) with replace-in-file - Build both
js
with Webpack andhtml
(Polymer) with Vulcanize - Minify minify
CSS
with node-minify andJS
with the Uglify Webpack plugin (only withPRODUCTION
build) - Add a hash to the built
js
andcss
files names in order to invalidate browser cache on every release (only withPRODUCTION
build)
Other commands are included in the bundle of Kubozer:
- Bump for bump the version of your project
- Translate with OneSkyApp
$ yarn add kubozer
Usage
$ [NODE_ENV=env_name] kubozer [option]
Options
--build Run the build task
--bump Semver label for version bump: patch, minor, major, prepatch, preminor, premajor, prerelease
--config Load specified Kubozer configuration file
--webpack-config Load specified Webpack configuration file
--i18n Use I18N capabilities
--upload Use ONLY with --i18n option: upload a translation file
--download Use ONLY with --i18n option: download a translation file
Examples
$ NODE_ENV=production kubozer --build
$ kubozer --build --config=../../kubozer.conf.js --webpack-config=another-webpack.config.js
$ kubozer --bump minor
$ kubozer --i18n --upload en
$ kubozer --i18n --download it
The PRODUCTION
build (NODE_ENV=production)
will add the minify step to the process. The default build will not produce a minified JS and also CSS.
If you want to handle a dynamic configuration, you can simply check the process.env.NODE_ENV
within the kubozer.conf.js
(or also webpack.config.js
) and change the exported configuration in relation to the NODE_ENV.
Kubozer will search for two configurations file: kubozer.conf.js
and webpack.config.js
(standard Webpack configuration file)
Example configuration. Kubozer will not assume nothing as default.
// kubozer.conf.js
module.exports = {
workspace: './test/workspace',
sourceFolder: './test/src-test',
buildFolder: './test/build',
// Relative to you workspace
assetsFolder: 'assets',
sourceCssFiles: ['/test.css'],
buildCssFile: 'style.min.css',
manifest: true,
stripConsole: true,
bump: {
files: [
'./test/src-test/package.json',
'./test/src-test/manifest.json'
]
},
copy: [
{
baseFolder: 'assets',
items: [
'imgs-others'
]
}, {
baseFolder: 'bundles',
items: [
''
]
}
],
replace: {
css: {
files: 'index.html',
commentRegex: ['<!--styles!-->((.|\n)*)<!--styles!-->'],
with: ['assets/style.min.css']
},
js: {
files: 'index.html',
commentRegex: ['<!--js!-->((.|\n)*)<!--js!-->'],
with: ['bundle.js']
}
}
vulcanize: {
srcTarget: 'index.html',
buildTarget: 'index.html',
conf: {
stripComments: true,
inlineScripts: true,
inlineStyles: true,
excludes: ['bundle.js']
}
},
i18n: {
secret: 'thisisyoursecret',
apiKey: 'heregoesyourapikey',
projectId: 'heyaprojectid',
defaultLanguage: 'en',
format: 'HIERARCHICAL_JSON'
languagesPath: './app/bundles'
}
};
// webpack.config.js
module.exports = {
entry: {
main: './src/index.js',
// Other modules
vendors: ['fetch', 'array-from']
}
output: {
// Make sure this path is the same of the `buildFolder` of `kubozer.conf.js` if you want to build everithing in the same directory
path: './test/build',
// Make sure to use [name] or [id] in output.filename
// when using multiple entry points
filename: '[name].bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js?$/,
// exclude: /(node_modules|bower_components)/,
exclude: ['node_modules', 'bundle.js', 'build'],
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-es2015-spread', 'syntax-object-rest-spread', 'transform-object-rest-spread']
}
}]
}
};
const Kubozer = require('kubozer');
const config = {...};
const webpackConfig = {...};
const isProd = process.env.NODE_ENV === 'production';
// Initialize (check for required config and init workspace folder)
const k = new Kubozer(config, webpackConfig);
// Sync operation
k.deletePrevBuild();
k.copy()
.then(() => k.replace())
.then(() => k.build(isProd))
.then(res => {
console.log(res);
})
.catch(err => {
console.error(err);
});
Simply delete the previous build in the "workspace" directory.
Copy every elements within the object copy
.
HTML replace in file. Set a placeholder in your HTML and remove/replace the inner elements during the build.
Webpack
and Vulcanize
following the configuration.
Choose if minify the content of js files with UglifyJS and css files with clean-css.
Bump to new version every file following the configuration.
Allowed values: patch | minor | major | prepatch | preminor | premajor | prerelease
$ git clone https://github.com/contactlab/kubozer.git#development
$ yarn
$ yarn run build
XO as linter and AVA for units.
$ yarn test
Any feature/bug fixing/refactor must be developed on a feature branch derived from the develop branch and integrate the changes through a pull request to have a code review.
Released under the Apache 2.0 license.