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 windowturbolinks = 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
hck2gulp;
Tests Accessibility for the provided URL
$ gulp access
hck2gulp;
Webpage load tester
$ gulp stress
hck2gulp;
Critical Path CSS Generator
$ gulp critical
hck2gulp;
Image Sprites Generator
$ gulp sprites
hck2gulp;