Unified frontend build pipeline for projects using the ShowCar UI Library
npm install showcar-gulp -D
Install gulp
npm install gulp -D
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']);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'
}));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
Runs a local server on localhost:3000 by default
gulp.task('serve', scgulp.serve({
dir: 'dist'
});Removes files according to the files pattern
gulp.task('clean', scgulp.clean({
files: ['dist/**/*']
});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']);
});