node package manager

showcar-gulp

showcar-gulp

Unified frontend build pipeline for projects using the ShowCar UI Library

Install

npm install showcar-gulp -D

Before starting

Install gulp

npm install gulp -D

Usage

Create your own gulpfile.js with the following structure

// gulpfile.js 
 
const gulp = require('gulp');
const scgulp = require('showcar-gulp')(gulp);
 
// gulp tasks alliases 
gulp.task('set-dev', () => {
    scgulp.config.devmode = true;
});
 
gulp.task('build', [
    'scss',
    'js'
]);
 
gulp.task('dev', ['set-dev', 'scss:watch', 'js:watch', 'serve']);
gulp.task('default', ['build']);

Build tasks

JS Build and minify your js files

gulp.task('js', scgulp.js({
    entry: 'src/main.js',
    out: 'dist/main.min.js'
}));

SCSS Build and minify css from sass files

gulp.task('scss', scgulp.scss({
    entry: 'src/main.scss',
    out: 'dist/showcar.min.css'
});

TypeScript Build and minify your ts files

gulp.task('ts', scgulp.ts({
    entry: 'src/main.ts',
    out: 'dist/tsmain.min.js'
}));

Linter tasks

Tasks for linting JS and CSS code style

JS

gulp.task('eslint', scgulp.eslint({
    files: 'src/**/*.js'
});
 

TypeScript

gulp.task('tslint', scgulp.tslint({
    files: 'src/**/*.ts'
}));
 

CSS

gulp.task('stylelint', scgulp.stylelint({
    files: 'src/**/*.scss'
});

For running linter tasks you will also need to create configuration files in your project.

.eslintrc.js for eslint task

.stylelintrc.js for stylelint task

Serve task

Runs a local server on localhost:3000 by default

gulp.task('serve', scgulp.serve({
    dir: 'dist'
});

Clean task

Removes files according to the files pattern

gulp.task('clean', scgulp.clean({
    files: ['dist/**/*']
});

Karma task

Runs karma tests

gulp.task('jstest' scgulp.js({
    entry: 'src/main.spec.js',
    out: 'dist/main.min.spec.js',
    watch: ['test-src/**/*.js', 'js-src/**/*.js'],
});
 
gulp.task('karma', ['jstest'], scgulp.karma({
    files: ['dist/index.spec.js']
});
 
gulp.task('jstest:watch', () => {
    gulp.watch(['test-src/**/*.js', 'js-src/**/*.js'], ['karma']);
});

Usage example

Please see our gulpfile