Starter kit for automating tasks in everyday front-end development. ๐จ๐ปโ๐ป โก๏ธ ๐ โจ ๐ค
MIT License
Starter kit for automating tasks in everyday front-end development. ๐จ๐ปโ๐ป โก๏ธ ๐ โจ ๐ค
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.
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
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
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;
At present, BB8 supports the last two versions of the following browsers:
This doesn't mean that BB8 cannot be used in older browsers, just that it's focus ensure compatibility with the ones mentioned above.
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.
The code is available under the MIT license Copyright ยฉ 2019.