BB8 - Starter Kit

Starter kit for automating tasks in everyday front-end development. 👨🏻‍💻 ⚡️ 🛠 ✨ 🤖

Installation ⬇️

1. Make sure you have a recent version of node.js installed.

2. Install yarn.

Yarn is a new, modern dependency management tool for JavaScript. It caches every package it downloads so it never needs to download it again. The easiest way to install:

❯ $ npm install -g yarn

3. Clone repository either with SSH or with HTTPS.

❯ $ git clone [email protected]:RamilMamedo/bb8.git
❯ $ git clone https://github.com/RamilMamedo/bb8

4. Install gulp.

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. The easiest way to install:

❯ $ yarn global add gulp-cli

5. Go to the downloaded folder.

❯ $ cd bb8

6. To get start immediately.

❯ $ yarn start

If you don’t want to install or configure tools, plugins or any other dependencies. So that you can focus on the code, just create a project, and you’re good to go.

Development & Production 🚀

You can custom setup the project at any time and specify the dependencies that you need in the file package.json

1. To install dependencies manually.

❯ $ yarn

2. To start development.

❯ $ yarn dev

If you did everything correctly, it should open a browser with a local server on port 2020 and a working browser-sync.

3. To finalize the project for production.

❯ $ yarn build

Folder Structures 📂

The last command will create a directory called build inside the current folder.
No configuration or complicated folder structure, just the ready files you need for production:

./build/
├── css
│   └── main.min.css
├── fonts
│   ├── Fontello
│   │   └── *.{eot,svg,ttf,woff,woff2}
│   └── StarJedi
│       └── *.{woff,woff2}
├── img
│   └── icons
│       └── *.svg
├── js
│   ├── core.js
│   └── vendors.min.js
├── index.html
├── robots.txt
└── service-worker.js

7 directories, 16 files

Plugins 🔌

• del — for deleting files and folders;
• browser-sync — time-saving synchronized browser testing and live webpage reload when making changes to your project files;
• merge-stream — for merging multiple streams into one interleaved stream;
• gulp-size — Logs out the total size of files in the stream and optionally the individual file-sizes;
• gulp-newer — for passing through only those source files that are newer than corresponding destination files;
• gulp-debug — debug Vinyl file streams to see what files are run through your Gulp pipeline;
• gulp-rename — for renaming files easily, adding suffixes and prefixes;
• gulp-filter — enables you to work on a subset of the original files by filtering them using glob patterns;
• gulp-concat — for concating files in the order that they are specified in the gulp.src function;
• gulp-plumber — prevent pipe breaking caused by errors from gulp plugins;
• gulp-load-plugins — loads gulp plugins from package dependencies and attaches them to an object of your choice;
• gulp-batch-replace — for replacing a batch of strings in the stream;

HTML

• gulp-nunjucks-render — is a build time HTML templating engine based on Python Django syntax;
• gulp-htmllint — linter for identifying and reporting on HTML code;
  • for more: htmllint;
• gulp-htmlmin — for minifying HTML files;
• gulp-html-beautify — for beautifying HTML files;
• gulp-w3c-html-validator — plugin to validate HTML using the W3C Markup Validation Service;

CSS

• csso — CSS minifier, cleaner, compressor, and restructurer;
• cssnano — is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately;
• gulp-sass — SCSS to CSS compiler;
• css-mqpacker — packing same CSS media query rules into one using PostCSS;
• css-declaration-sorter — sorting CSS declarations based on their property names;
• gulp-postcss — gulp plugin to pipe CSS through several plugins, but parse CSS only once;
  • for more: postcss;
• gulp-stylelint — a mighty, modern linter that helps you avoid errors and enforce conventions in your styles;
  • for more: stylelint;
• gulp-purifycss — for removing unused styles;
  • for more: purifycss;
• gulp-autoprefixer — automatically places vendor prefixes in CSS according to the Can I Use service;
  • for more: autoprefixer;

JS

• gulp-uglify — for minifying JavaScript with UglifyJS3;
• gulp-babel — to support modern JS (ES6) in browsers;
  • for more: babel;
• gulp-eslint — identifying and reporting on patterns found in ECMAScript/JavaScript code;
  • for more: eslint;

IMG

• gulp-webp — converting images into a modern format WebP.
• gulp-favicons — favicons generator based on node.js;
• gulp-imagemin — image compression PNG, JPG, GIF and SVG (including additional plugins for optimization);
  • for more: imagemin;
• gulp-svg-sprites — for creating SVG sprites;

Read more about image optimization here: [imagemin-to-compress-images, imagemin-plugins-difference];

Read more about webfont optimization here: Web Font Optimization;

Simple online tool for generating CSS @font-face and transforming difference font formats;

Browser Support 💻

At present, BB8 supports the last two versions of the following browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera
• Internet Explorer

This doesn't mean that BB8 cannot be used in older browsers, just that it's focus ensure compatibility with the ones mentioned above.

Contributing & Troubleshooting 🐛

Contributions, questions, and comments are all welcome and encouraged.

If you find yourself running into issues during installation or running the tools, please open an issue. BB8 would be happy to discuss how they can be solved.

• Bug Reports
• Pull Requests

License 📜

The code is available under the MIT license Copyright © 2019.