Build modern assets, JS, CSS, SVGs, transpile ES6 to ES5, CSSNext to CSS3, compress, minify, etc with simple node scripts and CLI.
Forget about huge Webpack configs and many dependencies. Just run node build all -p
to build your production project.
Assets Builder is an Object-Oriented JavaScript API allowing writing custom Node.js scripts and own CLI easily. To add new cmd just do:
CLI.registerCmd('hello', 'Say hello', [], () => {
console.log('Hello, world!');
})
and you may use now new command by running node build hello
;
By defaults Assets Builder allows building modern web projects out of the box:
-p
flag;npm install assets-builder --save
;build.js
;
const CLI = require('assets-builder');
CLI.init();
CLI.run();
By default Bunny Assets Builder uses Laravel PHP framework's folder structure and is compatible with manifest/elixir function. It can be used instead of laravel elixir.
module.exports = {
srcPath: 'resources/assets',
buildPath: 'public/build',
srcPathJs: 'resources/assets/js',
buildPathJs: 'public/build',
srcPathCss: 'resources/assets/css',
buildPathCss: 'public/build',
versionManifestPath: 'public/build/rev-manifest.json',
allCmds: [
'css',
'js',
'version app.css app.js',
],
};
Version Manifest file is a JSON file generated with node build version
which can be used by an application to get versioned file path (with random hash added at the end). For example, in Laravel having this rev-manifest.json: {"app.js":"app-quovy03k4.js","app.css":"app-lobywqy2g.css"}
calling elixir('app.js')
from view would return app-quovy03k4.js
.
allCmds is an array of commands which should be executed in defined order using node build all
or node build all -p
.
node_scripts
;Config.js
const BaseConfig = require('assets-builder/node_scripts/config');
module.exports = Object.assign({}, BaseConfig, {
srcPath: 'test_scripts',
buildPath: 'test_scripts/build',
srcPathJs: 'test_scripts',
buildPathJs: 'test_scripts/build',
srcPathCss: 'test_scripts',
buildPathCss: 'test_scripts/build',
versionManifestPath: 'test_scripts/build/rev-manifest.json',
});
Now in main build.js
replace config:
const CLI = require('assets-builder');
const ProjectConfig = require('./node_scripts/config'); // add this
CLI.Config = ProjectConfig; // add this
CLI.init();
CLI.run();
Type node build
to view the list of available commands.
List of global flags can be used in any command:
-p
- will execute a command in Production mode, for example, to minify JS and CSS, and to remove comments.List of default commands:
If no argument specified JS will use app
, CSS will use app
and Version will use app.js app.css
.
node build css index -p
- will, for example, bundle index.css file in the CLI.Config.srcPathCss
and save it to CLI.Config.buildPathCss/index.css
.
Version command will copy files from Config.CLI.buildPath
directory.
To create simple custom command use CLI.registerCmd(name, description, [params in description], callback)
callback will be called with params: (args, isProduction, Config) when command executed in Terminal.
In build.js
register new cmd after init()
and before run()
:
const CLI = require('assets-builder');
CLI.init();
CLI.registerCmd('hi', 'My first command', [], (args, isProduction, Config) => {
console.log('My 1st cmd :)');
});
CLI.run();
CLI.registerAllCmd('css-admin', 'Bundle and version admin CSS', [], [
'css admin',
'version admin.css'
]);
For more complicated commands it is recommended to write Node scripts and store them in a single directory, for example, node_scripts
.
Last argument in CLI.registerCmd()
may accept also an object which has run()
method which will accept same 3 arguments as callback.
For example, let's create a simple node script:
// node_scripts/hello.js
const colors = require('colors/safe');
const Hello = {
srcPath: '',
buildPath: '',
isProduction: false,
run(args, isProduction, Config) {
this.srcPath = Config.srcPathJs;
this.buildPath = Config.buildPathJs;
this.isProduction = isProduction;
const name = args.length === 0 ? 'Mev-Rael' : args[0];
return this.sayHello(name);
},
sayHello(name) {
console.log(colors.green(`Hello, ${name}`);
}
};
and register our new script in build.js
:
// build.js
const CLI = require('./node_scripts/cli');
const Hello = require('./node_scripts/hello');
CLI.init();
CLI.registerCmd('hello', 'Say hello', ['<name>'], Hello);
CLI.run();
Now node build hello
will print Hello, Mev-Rael
or node build hello John
will print Hello, John
.
Node scripts are much more flexible then any Gulp or Webpack plugins. Storing each script in separate file will make your build process maintanable and enjoyable.