A simple starterkit boilerplate that I use to realize my front end static development projects. I basically rebuilt a staterkit made by this guy Twitter! Also checkout his generator yeoman generator-startekit.

• Jekyll - A simple, extendable, static site generator.
• Bootstrap4 - A free front-end framework for faster and easier web development.
• Gulp - Automate and enhance your workflow
• Pug - Terse language for writing HTML templates.
• SASS - CSS with superpowers.
• Babel - Use next generation JavaScript, today (ES5 => ES6).
• NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine.

• Node.js or (recommended)
• Yarn.js and
• Gulp

$ git clone https://github.com/OziOcb/starterkit.git
$ cd starterkit/ && yarn install
$ gulp

gulp: Runs the default task (dev) including the following ones :

• styles: SCSS compiling to CSS, css minification and autoprefixing.
• templates: Pug compiling and rendering to HTML.
• scripts: ES6 to ES5 with babel, scripts minification and concatenation into a single file.
• serve: Starts a server at ./dist/ with all your compiled files, looking for file changes and injecting them into your browser.

gulp optimize: Optimizes your project (to improve the pagespeed) runs:

• inject-favicon-markups: Creates favicons and adds them to the project
• uncss: Removes unused CSS from your styles file using uncss.
• critical: Extract and inline critical-path (above-the-fold) CSS from HTML using critical
• images: Image compression.

gulp deploy: Deploy your dist folder into your server or surge cloud runs:

• optimize
• ftp: Uploads dist to ftpUploadsDir.
• surge: Uploads your dist to Surge

If you want to use the deploy task, you will have to edit the gulpfile.js lines between 88-90 with your ftp connection info: host | user | password. If you want to use Surge instead of FTP, just setup a domain name in the surgeInfo.domain

Once you setup ftpCredentials, you will have to choose a directory of your server where the deploy will go: ftpUploadsDir

Now you will be able to use gulp deploy and your /dist/ folder will go up to your ftp server!

Use npm run to list the gulp tasks available. You can run the tasks too using the npm run scriptname that is on the list.

While using my method you don't have to worry about CSS. Thanks to the UNCSS task that's a part of the Gulp Optimize task, all unused CSS code will be removed.

UNCSS task is set to leave a CSS code that is in use and 'special' parts of the code that are needed by Bootstrap modules that use JavaScript. In main.scss file, you can comment them out if you are sure that you won't use them in your project (that gives you even better optimization).

If you don't use Boostrap you can remove its JS (and jQuery) file from the Scripts task.

Because a problem with BS4 dependencies (popper.js) I had to add a bootstrap.bundle.min.js file instead of adding all dependencies separately (please, feel free to add your solution).

The code is available under the MIT license.