Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    showcar-gulppublic

    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

    Keywords

    install

    npm i showcar-gulp

    Downloadslast 7 days

    101

    version

    2.10.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar