jarvis-js

Complete gulp task for compiling js, with help of webpack.

Installation

npm i --save-dev jarvis-es5

Usage

I tried to do usage of this task as simple as posible. The following example will compile all the *.entry.js files under the folder src/ into to destination folder dist/, and rename it all from *.entry.js to *.bundle.js

1const gulp = require('gulp');
2var js = require('./index');
3
4var jsConfig = {
5    entry: 'test/src/**/*.entry.js',
6    output: 'test/dist/js/',
7    webpack: require('./test/webpack.config.js')
8};
9
10gulp.task('js:build', (done) => {
11    jsConfig.webpack.watch = false;
12    return js.run(jsConfig)(done);
13});
14
15gulp.task('js:watch', (done) => {
16    jsConfig.webpack.watch = true;
17    return js.run(jsConfig)(done);
18});

So we had the folowing file tree:

 src/
     main.entry.js
     common.entry.js

after running less:build (or less:watch if you want to watching changes), we will have:

 src/
     main.entry.js
     common.entry.js
 dist/
     main.bundle.js
     common.bundle.js

Webpack

As you can see, I use webpack for bundling js, it means you can use all power of webpack.config.js (except entry and output options).

Jarvis

But the killer-feature of this task is gulp-jarvis. With help of this plugin we can easily redeclare the destination folder by adding a special comment file to the beginning of the entry file. So let's go back to the previous example:

 src/
     main.entry.js
     common.entry.js

Lets change the contents of the file style.entry.less a little bit. We will add the following line to the beginning of style.entry.less /*file-output:dist/js/main.js;*/

And after this ша run less:build again at the output we will have:

 src/
     main.entry.less
     common.entry.less
 dist/
     common.bundle.css
     style/
         main.js
         

See, its so easy.

Options

The API of the package has only one method:

js.build(options)

1defaultOptions = {
2    entry: `src/**/*.entry.js`, // source glob for gulp.src(...)
3    output: 'dist/js/', //default destination folder
4    webpack: undefined, //webpack config
5}