Boilerplate.js

Pre-Install

$ npm install gulp -g

Install

NPM

$ npm init -y

$ npm install boilerplate.js --save

Yarn

$ yarn add boilerplate.js

Update

NPM

$ npm update

Yarn

$ yarn add boilerplate.js

Usage

run 'gulp'

Activate/Deactive Turbolinks v5.1.1 in "./Boilerplate/src/js/init.js"

    // Change the value to Activate/Deactive Turbolinks v5.1.1
    window.turbolinks = true;

CLI Commands

SASS Page Specific File Structure Generator

$ gulp --sass http://LocalOrRemote.com/first-page/second-page

SASS Page Specific Component Generator

$ gulp --sass http://LocalOrRemote.com/first-page/second-page~testComponent

Generate SASS Global Component

$ gulp --sass ~componentName

Use this command to generate a init.js with file structure. This function executes only on that page

$ gulp --initPage http://localhost:5000/first-page/second-page

or

$ gulp --js http://localhost:5000/first-page/second-page

Generate JavaScript Page Component (Generates: './page/firstPage/secondPage/testComponent.js)

$ gulp --js http://localhost:5000/first-page/second-page~testComponent

Generate JavaScript Page Sub Component (Generates: './page/firstPage/secondPage/testComponent/subComponent.js)

$ gulp --js http://localhost:5000/first-page/second-page~testComponent~subComponent

Generate External JavaScript Component (Generates: './external/componentName.js)

/* How To Use

    External.js('componentName', function(){
        components.componentName.init();
    });

*/

$ gulp --js ~componentName --external

Generate JavaScript Global Component (Generates: './components/globalComponent.js)

$ gulp --js ~globalComponent

Generate JavaScript Global Sub Component (Generates: './components/googleMaps/fetchData.js)

$ gulp --js ~googleMaps~fetchData

Watches 'JS' & 'SASS' folder for any changes. Runs 'gulp sass' or 'gulp js'

$ gulp

$ gulp watch

SASS Compiler

$ gulp sass

Babel transpiler with ESLint

$ gulp js

Minifies SASS

$ gulp sass --prod

Seperates SASS into multiple files - app.css, app-mobile.css, app-tablet.css, app-desktop.css

$ gulp sass --seperate

Minifies Javascript with Babel transpiler

$ gulp js --prod

Executes both "gulp js --prod" & "gulp sass --prod"

$ gulp prod

Installs Jigsaw (Requires Composer To Be Installed Globally)

$ gulp jigsaw

Starts Jigsaw Server

$ gulp

Image Optimizer

$ gulp image

$ gulp

Sitespeed.io Web Performance Test

$ gulp sitespeed --http://google.com

Fetches and Minifes the provided URLs. Output folder './Minified'

$ gulp minify

hck2.gulp.task('minify', function () {
    hck2.minify([
        'https://google.com',
        'cnn.com',
        'https://twitter.com/about'
    ]);
});

Tests Accessibility for the provided URL

$ gulp access

hck2.gulp.task('access', function () {

    // Enter URL or path to .html file
    var url = 'https://www.couchsurfing.com/';

    // WCAG2A, WCAG2AA, WCAG2AAA, and Section508
    var accessibilityLevel = 'WCAG2AA';

    var reportLevels = {
        notice: false,
        warning: true,
        error: true
    }

    hck2.accessibility(url, accessibilityLevel, reportLevels);
});

Webpage load tester

$ gulp stress

hck2.gulp.task('stress', function () {

    var url = 'https://www.example.com';
    var concurrent = 10;
    var requestsPerSecond = 5;
    var maxSeconds = 30;

    hck2.stressTest(url, concurrent, requestsPerSecond, maxSeconds);
});

Critical Path CSS Generator

$ gulp critical

hck2.gulp.task('critical', function () {

    var stylesheet = './public/css/app.css';
    var output = './public/css/'; //critical.css
    var url = 'https://example.com';
    var width = 1300;
    var height = 900; 

    hck2.criticalCSS(stylesheet, output, url, width, height);
});

Image Sprites Generator

$ gulp sprites

hck2.gulp.task('sprites', function () {

    var input = './src/images/*.png';
    var output = './src/images/output/';

    hck2.sprites(input, output);
});

License

MIT