@kite-tech-ltd/gulp-tasks

Kite Gulp Tasks

A collection of gulp tasks which can be shared between JavaScript and Typescript projects.

Installation

Via NPM:

npm install --save-dev kite-gulp-tasks

Usage

Configuration

Two files need to be created in the base of your project.

gulpfile.js which is the main gulpfile. This passes the config to the child gulp processes.

require('kite-gulp-tasks')(
    require('./gulpfile.config')
);

gulpfile.config.js is a config file for the gulp tasks.

It should take the format:

const _buildDir = 'dist';
const _srcDir = _buildDir + '/src';

const config = {
    /*
        Tasks to run before running watch.
    */
    preWatchTasks: [
        'svgstore',
        'browser-sync',
    ],
    /*
        Tasks to run inside of watch.
    */
    watchTasks: [
        'unit-tests',
        'tslint',
        'watch:build',
    ],
    /*
        Names of the gulp tasks run when 
        build-dev is run.
    */
    buildTasksDev: [
        'clean',
        'compile-ts',
        'scripts-dev',
    ],
    /*
        Names of the gulp tasks run when 
        build-dist is run.
    */
    buildTasksDist: [
        'clean',
        'compile-ts',
        'scripts-dist',
    ],
    /*
        Inject a CDN for asset URLs.
        This mirrors an environment variable since 
        build should be done through CI (through which
        you can set the CDN URL)
        IMPORTANT: no trailing '/' otherwise things break
    */
    cdnUrl: process.env.CDN_BASE_URL,
    /*
        The directory used as the entry point 
        when compiling the bundled client side 
        scripts.
    */
    clientEntryPoint: _srcDir + '/client/kite.client.window.js',
    /*
        The directories that various files will be put.
    */
    dir: {
        build: _buildDir,
        src: _srcDir,
        test: _buildDir + '/test',
        coverageOutput: 'coverage',
        sourceMaps: 'sourcemaps',
    },
    /*
        The files that need to be built upon compilation.
    */
    filesToBuild: [
        '**/*.ts',
        '!node_modules/**',
        '!example/**',
        '!dist/**',
        '!build-scripts/**',
    ],
    /*
        Which files to watch for changes in when gulp watch 
        is ran.
    */
    filesToWatch: [
        './src/**/*.ts',
        './test/**/*.ts',
        './example/app.client.js',
    ],
    /*
        Example Jest configuration options for TypeScript.
        For JavaScript, remove the transform field and update the regexes.
    */
    jestConfig: {
        moduleFileExtensions: [
            'js',
            'jsx',
            'json',
            'ts',
            'tsx'
        ],
        transform: {
            '\\.ts$': '<rootDir>/node_modules/ts-jest/preprocessor.js'
        },
        collectCoverageFrom: ["**/*.{js,ts,tsx,jsx}", "!**/node_modules/**", "!**/vendor/**"],
        testRegex: '.*spec.ts$'
    },
    /*
        Jest Command line options.
        Eg. do not run tests in parallel and exit on first failure
    */
    jestOptions: {
        runInBand: true,
        bail: true
    },
    bsConfig: {
        /*
            Any browsersync configurations, defaults to
            { server: { baseDir: './' } }
        */
    },
    /*
        Configuration for injecting svgs into a HTML file.
        The HTML file will be output in the build directory.
    */
    svgConfig: {
        svgPath: './assets/images/*.svg',
        inHtmlPath: './index.html',
    },
    /*
        The name of the file output when the client side 
        scripts are compiled.
        This is replaced by **.min.js when the dist version 
        is built.
    */
    outputFileName: 'kite.js',
    /*
        The location of the tsconfig file to use for typescript 
        operations.
    */
    tsConfig: 'tsconfig.json',
    /*
        The location of the webpack config file.
    */
    webpackConfig: 'webpack.config.js',
};

module.exports = config;

Running tasks

The name of the tasks match to the filename in the gulp project.

e.g The task in gulp.watch.js can be run using the command

gulp watch

Or gulp.unit-tests.js can be run with

gulp unit-tests

Development and testing

To develop Kite-Gulp-Tasks, you should test within your project.

You can either link locally following npm's guides or fetch the kite-gulp-tasks package from GitHub, where you have pushed your changes in a branch.

To fetch from GitHub in package.json use:

{
    "dependencies": {
        "kite-gulp-tasks": "[e-mail]:OceanLabs/Kite-Gulp-Tasks.git#${YOUR_COMMIT_SHA}"
    }
}

Where YOUR_COMMIT_SHA is the hash (SHA-1) of the commit you want to test.

You can then run npm install to get that commit's version of Kite-Gulp-Tasks.