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.
$ 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 projectuncss
: Removes unused CSS from your styles file using uncss.critical
: Extract and inline critical-path (above-the-fold) CSS from HTML using criticalimages
: Image compression.
gulp deploy
: Deploy your dist
folder into your server or surge cloud runs:
optimize
ftp
: Uploadsdist
toftpUploadsDir
.surge
: Uploads yourdist
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.