@kite-tech/gulp-tasks
v2.0.6
Published
A collection of gulp tasks which can be shared between JavaScript and Typescript projects.
Downloads
50
Keywords
Readme
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": "[email protected]: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.