Boilerplate.js

Pre-Install

``console
$ npm install gulp -g
`

Install

#### NPM
`console
$ npm init -y
`
`console
$ npm install boilerplate.js --save
`
#### Yarn
`console
$ yarn add boilerplate.js
`

Update

#### NPM
`console
$ npm update
`

#### Yarn
`console
$ yarn add boilerplate.js
`

Usage

$3

$3

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

CLI Commands

SASS Page Specific File Structure Generator
`console
$ gulp --sass http://LocalOrRemote.com/first-page/second-page
`
SASS Page Specific Component Generator
`console
$ gulp --sass http://LocalOrRemote.com/first-page/second-page~testComponent
`
Generate SASS Global Component
`console
$ gulp --sass ~componentName
`

Use this command to generate a init.js with file structure. This function executes only on that page
`console
$ gulp --initPage http://localhost:5000/first-page/second-page
`
or
`console
$ gulp --js http://localhost:5000/first-page/second-page
`
Generate JavaScript Page Component (Generates: './page/firstPage/secondPage/testComponent.js)
`console
$ gulp --js http://localhost:5000/first-page/second-page~testComponent
`
Generate JavaScript Page Sub Component (Generates: './page/firstPage/secondPage/testComponent/subComponent.js)

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

Generate External JavaScript Component (Generates: './external/componentName.js)
`javascript
/* How To Use

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

*/
`
`console
$ gulp --js ~componentName --external
`

Generate JavaScript Global Component (Generates: './components/globalComponent.js)
`console
$ gulp --js ~globalComponent
`
Generate JavaScript Global Sub Component (Generates: './components/googleMaps/fetchData.js)
`console
$ gulp --js ~googleMaps~fetchData
`

Watches 'JS' & 'SASS' folder for any changes. Runs 'gulp sass' or 'gulp js'
`console
$ gulp
`
`console
$ gulp watch
`

SASS Compiler
`console
$ gulp sass
`

Babel transpiler with ESLint
`console
$ gulp js
`

Minifies SASS
`console
$ gulp sass --prod
`

Seperates SASS into multiple files - app.css, app-mobile.css, app-tablet.css, app-desktop.css
`console
$ gulp sass --seperate
`

Minifies Javascript with Babel transpiler
`console
$ gulp js --prod
`

Executes both "gulp js --prod" & "gulp sass --prod"
`console
$ gulp prod
`

Installs Jigsaw (Requires Composer To Be Installed Globally)
`console
$ gulp jigsaw
`
Starts Jigsaw Server
`console
$ gulp
`

Image Optimizer
`console
$ gulp image
`
`console
$ gulp
`

Sitespeed.io Web Performance Test
`console
$ gulp sitespeed --http://google.com
`


Fetches and Minifes the provided URLs. Output folder './Minified'
`console
$ gulp minify
`
`javascript
hck2.gulp.task('minify', function () {
hck2.minify([
'https://google.com',
'cnn.com',
'https://twitter.com/about'
]);
});
`

Tests Accessibility for the provided URL
`console
$ gulp access
`
`javascript
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
`console
$ gulp stress
`
`javascript
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
`console
$ gulp critical
`
`javascript
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
`console
$ gulp sprites
`
`javascript
hck2.gulp.task('sprites', function () {

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

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

License

MIT