Skip to content

Starter kit for automating tasks in everyday front-end development. πŸ‘¨πŸ»β€πŸ’» ⚑️ πŸ›  ✨ πŸ€–

License

Notifications You must be signed in to change notification settings

rommelmamedov/bb8

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

47 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

BB8 - Starter Kit BB8

PRs Welcome dependencies Status devDependencies Status MIT license

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 πŸš€

Dev Mode

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 πŸ”Œ

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

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;
  • gulp-stylelint β€” a mighty, modern linter that helps you avoid errors and enforce conventions in your styles;
  • gulp-purifycss β€” for removing unused styles;
  • gulp-autoprefixer β€” automatically places vendor prefixes in CSS according to the Can I Use service;

JS

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

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);
  • 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.

License πŸ“œ

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