Nimble Prime Musketeers

    @lernetz/gulp-typescript-bundle

    0.3.1 • Public • Published

    @lernetz/gulp-typescript-bundle

    This package wraps several gulp plugins into one reusable Gulp task. The main goal of the task is to compile a set of TypeScript files into a single .js file. It automatically creates a minified version and injects the sourcemaps. It internally uses Rollup with treeshaking for an as small as possible file size. Rollup is set up to also bundle npm packages. This allows to use npm packages in our source TypeScript. You need to install the required types for TypeScript; see: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/ And also install the library itself with npm so rollup can find and bundle it.

    In the 0.1.x version with Gulp 4.0 this module exports a bundle function, which you can register with gulp.task() in your Gulpfile.

    Usage

    The following example will compile the file Main.ts and bundle all its dependencies into to the output folder public. It creates the following .js files:

    • main.js - non-minified .js bundle
    • main.js.map - accompanying sourcemap file
    • main.min.js - minified .js bundle The resulting .js files expose the exported functions/variables of Main.ts under the global name main.
    var gulp = require('gulp');
    
    // this will automatically register to gulp tasks: ln:bundle, ln:minify and returns them as gulp.series( 'ln:bundle', 'ln:minify' )
    var bundle = require( '@lernetz/gulp-typescript-bundle' );
    
    // define your own task
    gulp.task( 'bundle', bundle( { dest:'public', src:'Main.ts', name:'main' } ) );
    
    // and use it directly in your watch statement
    gulp.task('default', function() {
        gulp.watch( 'typescript/**/*.ts', gulp.series( 'bundle' ) );
    });

    Options

    The task accepts a parameter object with the following attributes:

    {
        name: 'main', // the name of the js file to create and also the globalname 
    	dest: 'public', // the destination used in gulp.dest( .. )
        src: './src/main.ts', // the source the the main typescript file
        rollup: {
            // the default input options used for rollup. see: https://rollupjs.org/guide/en#javascript-api
            inputOptions: {
                input: options.src, // autogenerated if not defined
                plugins: [
                    typescript( { check:false } ),
                    resolve( { jsnext: true, main: true, browser:true } ),
                    commonjs(),
                ]
            },
            // the default output options used for rollup. see: https://rollupjs.org/guide/en#javascript-api
            outputOptions: { 
                file: options.dest + '/' + options.name + '.js', // autogenerated if not defined
                name: options.name,  // autogenerated if not defined
                format: 'iife',
                sourcemap: true
            }
        },
        uglify: {} // the default options for the ugify task: https://www.npmjs.com/package/gulp-uglify-es
    }

    Install

    npm i @lernetz/gulp-typescript-bundle

    DownloadsWeekly Downloads

    9

    Version

    0.3.1

    License

    ISC

    Unpacked Size

    5.79 kB

    Total Files

    3

    Last publish

    Collaborators

    • lernetz-mich
    • stakx