npm package: @kite-tech-ltd/gulp-tasks
Description: A collection of gulp tasks which can be shared between  JavaScript and Typescript projects.
Author: Chris Berry
Latest version: 1.16.1

# 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.

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

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

It should take the format:

``` javascript
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 
```sh
gulp watch
```

Or gulp.unit-tests.js can be run with
```sh
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:
```js
{
    "dependencies": {
        "kite-gulp-tasks": "git@github.com: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.