I constantly find myself using the same Browserify plug-ins and transforms on every project, and I always end up writing pretty much the same Gulp script over and over again. Simplifyify is the solution to that problem.
- Supports globs, even on Windows
- Supports Browserify transforms, such as Babel, CoffeeScript, TypeScript, etc.
- Has a programmatic API, for use with build tools like Grunt, Gulp, Broccoli, etc.
- Bundle everything into one big file, or create different bundles for each part of your app (see examples below)
- One command creates all the files you need:
- globify - Run browserify and watchify with globs - even on Windows
- sourcemapify - Sourcemap plugin for Browserify
Install using npm:
npm install simplifyify
Usage: simplifyify [options] <files...>
Options:
-o, --outfile <filespec> The output file or directory.
May include a filename pattern (e.g. "*.bundle.js")
-u, --exclude <filespec> File path or glob pattern to exclude.
Don't forget to put quotes around glob patterns
-s, --standalone <name> Export as a named UMD bundle
For example: my.cool.module
-b, --bundle Create a non-minified bundle for development (.js)
This is the default if no other output option is set
-d, --debug Create a source map for debugging (.js.map)
-m, --minify Create a minified bundle for production (.min.js)
-v, --test Create a bundle with code-coverage instrumentation for testing (.test.js)
-w, --watch Watch source file(s) and rebuild the bundle(s) automatically
Arguments:
<files...> One or more entry-file paths and/or glob patterns.
Don't forget to put quotes around glob patterns.
A separate Browserify bundle will be created
for each entry file.
In the simplest usage, you can use Simplifyify to bundle all of your code into a single file:
simplifyify src/index.js
src/index.js --> src/index.bundle.js # <-- unminified code
By default, the output file is at the same path as the entry file, but with a .bundle.js
extension. You can customize this using the --outfile
argument:
simplifyify src/index.js --outfile dist/my-package.js
src/index.js --> dist/my-package.js # <-- unminified code
If you want the bundled code to be minified, then add the --minify
flag:
simplifyify src/index.js --outfile dist/my-package.js --minify
src/index.js --> dist/my-package.js # <-- minified code
What if you also want a source map (.map
) file? Just add the --debug
flag.
simplifyify src/index.js --outfile dist/my-package.js --minify --debug
src/index.js --> dist/my-package.js # <-- minified code
src/index.js --> dist/my-package.js.map # <-- source map
Simplifyify can output multiple bundles of your code in a single command. Let's say you want to create an unminified bundle for development (with a source map), a minified bundle for production (with a source map), and a test bundle (with code-coverage instrumentation) for testing:
simplifyify src/index.js --outfile dist/my-package.js --bundle --debug --minify --test
src/index.js --> dist/my-package.js # <-- unminified code
src/index.js --> dist/my-package.js.map # <-- source map
src/index.js --> dist/my-package.min.js # <-- minified code
src/index.js --> dist/my-package.min.js.map # <-- source map
src/index.js --> dist/my-package.test.js # <-- code-coverage
In many applications, it doesn't make sense for all of your code to be bundled into one huge file. Maybe you want to create separate bundles for each folder, or for each component or section of your app. Simplifyify makes this easy. It will create separate bundles for each entry file that you specify. For example:
simplifyify src/store.js src/cart.js src/checkout.js --outfile dist --bundle --minify --debug
src/store.js --> dist/store.js # <-- unminified code
src/store.js --> dist/store.js.map # <-- source map
src/store.js --> dist/store.min.js # <-- minified code
src/store.js --> dist/store.min.js.map # <-- source map
src/cart.js --> dist/cart.js # <-- unminified code
src/cart.js --> dist/cart.js.map # <-- source map
src/cart.js --> dist/cart.min.js # <-- minified code
src/cart.js --> dist/cart.min.js.map # <-- source map
src/checkout.js --> dist/checkout.js # <-- unminified code
src/checkout.js --> dist/checkout.js.map # <-- source map
src/checkout.js --> dist/checkout.min.js # <-- minified code
src/checkout.js --> dist/checkout.min.js.map # <-- source map
Specifying each entry file can quickly become cumbersome though. That's where globs come in. You can specify one or more globs, and Simplifyify will create a separate bundle for each file that matches the glob pattern. For example:
simplifyify "src/*/index.js" --outfile "dist/*.bundle.js" --bundle --minify --debug
src/store/index.js --> dist/store/index.bundle.js # <-- unminified code
src/store/index.js --> dist/store/index.bundle.js.map # <-- source map
src/store/index.js --> dist/store/index.bundle.min.js # <-- minified code
src/store/index.js --> dist/store/index.bundle.min.js.map # <-- source map
src/cart/index.js --> dist/cart/index.bundle.js # <-- unminified code
src/cart/index.js --> dist/cart/index.bundle.js.map # <-- source map
src/cart/index.js --> dist/cart/index.bundle.min.js # <-- minified code
src/cart/index.js --> dist/cart/index.bundle.min.js.map # <-- source map
src/checkout/index.js --> dist/checkout/index.bundle.js # <-- unminified code
src/checkout/index.js --> dist/checkout/index.bundle.js.map # <-- source map
src/checkout/index.js --> dist/checkout/index.bundle.min.js # <-- minified code
src/checkout/index.js --> dist/checkout/index.bundle.min.js.map # <-- source map
TIP: Don't forget to put quotes around your glob patterns! Otherwise, some shells (e.g. Bash) will try to expand them themselves, which may or may not work
Simplifyify honors the browserify.transform
field in your package.json
file. For example, the following configuration would use Babelify to transform your ES6 code to ES5:
{
"name": "my-package",
"version": "1.2.3",
"browserify": {
"transform": ["babelify"]
},
"devDependencies": {
"babelify": "^7.2.0",
}
}
You can also specify options for your transforms. The exact options depend on the transform you're using. Here's an example for Babelify:
{
"name": "my-package",
"version": "1.2.3",
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"] }]
]
},
"devDependencies": {
"babelify": "^7.2.0",
}
}
Simplifyify also has a programmatic API, so you can use it directly in your build scripts (Gulp, Grunt, Broccoli, etc.)
Here's the API definition, and here's a full example. Just pass an array of strings (file paths and/or glob patterns) and an options param. You get back an EventEmitter
, which fires all the Browserify & Watchify events.
var simplifyify = require("simplifyify");
gulp.task("browserify", function(done) {
simplifyify("lib/*.module.js",
{
outfile: "dist/*.bundle.js",
debug: true,
minify: true
})
.on("end", function() {
// Finished successfully!
done();
})
.on("error", function(err) {
// Something went wrong
done(err);
});
});
I welcome any contributions, enhancements, and bug-fixes. File an issue on GitHub and submit a pull request.
To build the project locally on your computer:
-
Clone this repo
git clone https://github.com/bigstickcarpet/simplifyify.git
-
Install dependencies
npm install
-
Run the build script
npm run build
-
Run the tests
npm test
Simplifyify is 100% free and open-source, under the MIT license. Use it however you want. I