babel-minify

DISCONTINUE NOTICE

This project is discontinued here and I'm contributing here -

https://github.com/babel/babili

Thanks for your interest !!!

Some tools, babel plugins and presets to minify ES6+ code or whatever code babel understands.

Try Online

https://boopathi.in/babel-minify/

🚨 WARNING: EXPERIMENTAL

Track

• mangle
• mangle-options - keep_fnames, topLevel, eval, except
• dead_code
• conditionals
• global_defs
• evaluate
• drop_debugger
• drop_console
• properties - member-expression-literals, property-literals
• join_vars
• booleans - minify booleans
• unsafe - undefined-to-void, simplify-comparison-operators, function-to-arrow
• sequences
• if_return
• cascade
• keep_fargs
• keep_fnames - mangle-options, function-to-arrow-options

Packages overview

gulp-babel-minify

import minify from 'gulp-babel-minify';

gulp.task('min', function() {
  return gulp.src('build/temp/app.bundle.js')
    .pipe(minify(opts))
    .pipe(gulp.dest('build/'));
})

babel-minify

• Node API + CLI

import minify from 'babel-minify';
minify(inputCode, {
  conditionals: true,
  drop_debugger: true
});

More details here - https://github.com/boopathi/babel-minify/blob/master/packages/babel-minify

babel-preset-min

This is a preset that uses the default options of babel-minify

WARNING: This might cause some regression, depending on what other plugins and presets you use with this preset - because all the plugins are applied in one pass by default in babel. You can enable the passPerPreset option in babel, but then all the babel-minify plugins are still applied in one pass. So, consider using babel-minify NodeAPI or CLI or Gulp task with the options - plugins: [] and presets: [] to pass your other plugins and presets.

{
  "presets": ["min"],
  "comments": false,
  "compact": true,
  "minified": true
}

Sample App Usage

When you bundle your code, remember to split your bundle into multiple packages or at least vendor and your app code separately. Usually, the vendor code will be ES5 compatible and UglifyJS does a better job here. And all the code you write is mostly ES6. You may want to ship this ES6 code to browsers. So we can pass this ES6 code via babel using a specific set of plugins applied in some fashion and make it do the optimizations and minification for you.

webpack.config.js

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js'
    vendor: ['react', 'react-router', 'lodash', 'my-polyfills']
  },
  output: {
    path: 'build/webpack',
    filename: '[name].bundle.js'
  }
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor')
  ]
}

So, this would generate two files - vendor.bundle.js & app.bundle.js

gulpfile.js

const uglify = require('gulp-uglify');
const minify = require('gulp-babel-minify');
const webpack = require('webpack');
const config = require('./webpack.config.js');

gulp.task('webpack', function(cb) {
  webpack(config, (err, stats) => {
    if (err) return cb(err);
    console.log(stats.toString());
    cb();
  });
});

gulp.task('minify-vendor', ['webpack'], function() {
  return gulp.src('build/webpack/vendor.bundle.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/minified'));
});

gulp.task('minify-app', ['webpack'], function() {
  return gulp.src('build/webpack/app.bundle.js')
    .pipe(minify())
    .pipe(gulp.dest('build/minified'));
});

LICENSE

http://boopathi.mit-license.org