Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ilicmarko/maverick-cli
Handcrafted CLI to make my front-end workflow much easier.
https://github.com/ilicmarko/maverick-cli
cli gulp maverick-cli pug scaffold scss webapp
Last synced: 2 months ago
JSON representation
Handcrafted CLI to make my front-end workflow much easier.
- Host: GitHub
- URL: https://github.com/ilicmarko/maverick-cli
- Owner: ilicmarko
- License: mit
- Created: 2017-10-31T13:02:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T14:54:06.000Z (5 months ago)
- Last Synced: 2024-10-01T15:04:48.283Z (3 months ago)
- Topics: cli, gulp, maverick-cli, pug, scaffold, scss, webapp
- Language: JavaScript
- Size: 237 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
Maverick CLI
Maverick CLI lets you create a scaffolding for your next project with ease. Maverick CLI is based on a popular [Yeoman](http://yeoman.io/) generator [**webapp**](https://github.com/yeoman/generator-webapp), with some changes.
## Features
* enable [ES2015 features](https://babeljs.io/docs/learn-es2015/) using [Babel](https://babeljs.io)
* CSS Autoprefixing
* Built-in preview server with BrowserSync
* Automagically compile Sass with [libsass](http://libsass.org)
* Automagically compile Pug
* Automagically lint your scripts
* Map compiled CSS to source stylesheets with source maps
* Awesome image optimization
* Automagically wire-up dependencies installed with [Bower](http://bower.io)
## Installation
On macOS, Linux, or Windows run the following:
```bash
npm install -g maverick-cli
```
**That is it!**
## Gulp Commands
* `gulp serve` to preview and watch for live changes
* `gulp` or `gulp build` to build the app for production
* `gulp serve:dist` to preview the production build
## CLI Commands
### Init
`maverick init [Project name] [options]` - to scaffold your webapp *( is optional)*
**Options**:
`--skip-install` to skip the execution of `bower` and `npm` installation after scaffolding.
### SASS
`maverick sass [options] [File name]` - create a SCSS file.
**Options:**
Options argument is **required**.
* `-c` or `--component` to add a component, *this also adds a css selector*.
* `-e` or `--element` to add an element
* `-t` or `--tool` to add a tool
* `-u` or `--utility` to add a utility
* `-p` or `--plugin` to add a plugin
**Example**
```bash
maverick sass -c "responsive-img"
```
## Pug
`maverick pug [File name]` to create a pug page
**Options:**
* `-t` or `--title ` to add a title to the page
If you don't provide the title it will be empty.
## Project Structure
There is a well-defined project structure that must be respected.
```
src
├───fonts
├───images
├───js
├───sass
│ ├───components
│ ├───elements
│ ├───generic
│ ├───plugins
│ ├───tools
│ └───utilities
└───views
├───inc
└───layouts
```
**SASS Folder**
This is where all the `.scss` files are found, gulp will watch for changes in this folder.
* `/components` - Complete chunks of UI, like *navigation, cards, panels* etc..
* `/elements` - Unclassed HTML elements, like *a, h1, body, blockquote* etc..
* `/generic` - Reset and normalize css.
* `/plugins` - SCSS files from imported plugins, like *owl-carousel, popper* etc..
* `/tools` - Mixins and functions
* `/utilities` - Override and helper functions, they are usually high-priority *(!important)*
> **SCSS files shouldn't be created manually, CLI should be used for that.**
**Views folder**
This is where all the `.pug` files are found, gulp will watch for changes in this folder.
* `inc` - Page parts that are included in a template, like *header, footer, navigation* etc...
* `layouts`- Templates that are extended by the pages.
In the root of the `views` is where the pages are located.
## Notes:
If the project hasn't been generated by **Maverick CLI** commands (scss, pug) won't work.