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.
;
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 whenbuild-dev is run.*/buildTasksDev:'clean''compile-ts''scripts-dev'/*Names of the gulp tasks run whenbuild-dist is run.*/buildTasksDist:'clean''compile-ts''scripts-dist'/*Inject a CDN for asset URLs.This mirrors an environment variable sincebuild should be done through CI (through whichyou can set the CDN URL)IMPORTANT: no trailing '/' otherwise things break*/cdnUrl: processenvCDN_BASE_URL/*The directory used as the entry pointwhen compiling the bundled client sidescripts.*/clientEntryPoint: _srcDir + '/client/kite.client.window.js'/*The directories that various files will be put.*/dir:build: _buildDirsrc: _srcDirtest: _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 watchis 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: truebail: truebsConfig:/*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 sidescripts are compiled.This is replaced by **.min.js when the dist versionis built.*/outputFileName: 'kite.js'/*The location of the tsconfig file to use for typescriptoperations.*/tsConfig: 'tsconfig.json'/*The location of the webpack config file.*/webpackConfig: 'webpack.config.js';moduleexports = 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": "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.