Grunt-chest-compiler NPM

grunt-chest-compiler

dynamic and static javascript modules in the browser with a footprint only as large as it needs to be.

What is it, precious? How does it work?

It allows for dynamic module based development, it concats js files making sure dependencies are accessible, it assumes that main.js will be injected to the html. If main includes other modules - require(module_name) - put the modules in main.js, before they are needed. In a sense it's like browserify, but it also allows for dynamic inclusions: require(module_name, callback). If any static dependency - require(module_name) - is shared between any two modules that do not have parents (modules that statically depend on them), that dependency is moved to main.js. But you don't need to care about all that, you just require as you desire. You can also require stylesheets in js require(module_name.css) or in scss/less // @requires: dependency1.scss dependency2.scss.

What is it good for?

The best and most appropriate use case is when you want to make a website fully in javascript, and you do your routing in that javascript. It is not best suited for traditional insert script where you need it sort of web development, but i will probably allow for that in the future.

It runs babel over the concatenated files, which means that you can use babels es6 conventions and that it supports React or jsx just fine.

For now, it runs sass over any scss modules.

In situations where you want to use a 3rd party API, you insert // auto-export object (with no "[]") where object is what you want to export from that library, for example, in React's case we would use // auto-export React and so on..

What do i need to start?

I'm thinking of migrating from Grunt to just plain Nodejs eventually, but for now you can install the plug-in like so:

npm install grunt-chest-compiler --save-dev

And that's all you need to start!

Once the plug-in has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-chest-compiler');

Tasks

chest task

Receives project directory cwd and compiles js files to dest_js nad css files to dest_css.

Options

cwd

Where your main.js (or main.jsx) is located at. All subsequent dependencies must be inside this root folder.

dest_js (path)

The destination directory to compile the js files to. Defaults to bin/js.

dest_css (path)

The destination directory to compile the css files to. Defaults to bin/css.

gzip (true or false)

Should the files be gzipped?

verbose (1, 2 or 3)

Show additional information.

chest_get task

Transfer chest.js to your bin/js. Should be appended to main.js automatically and in the future it will.

Example Gruntfile.js

The following Gruntfile 'chests' every js, jsx, css, scss or sass file in cli/modules to bin.

module.exports = function(grunt) {
  grunt.initConfig({
    'chest': {
      all: { cwd: 'cli/modules/' }
    },
    'chest_get':{
      all: { beautiful:true }
    }
  });

  this.loadNpmTasks('grunt-chest-compiler');

  return this.registerTask('default', ['chest_compiler', 'chest_get']);
};

Just run