maverick-cli
v1.4.0
Published
A simple CLI for scaffolding my projects.
Downloads
21
Readme
Maverick CLI lets you create a scaffolding for your next project with ease. Maverick CLI is based on a popular Yeoman generator webapp, with some changes.
Features
- enable ES2015 features using Babel
- CSS Autoprefixing
- Built-in preview server with BrowserSync
- Automagically compile Sass with libsass
- 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
Installation
On macOS, Linux, or Windows run the following:
npm install -g maverick-cli
That is it!
Gulp Commands
gulp serve
to preview and watch for live changesgulp
orgulp build
to build the app for productiongulp serve:dist
to preview the production build
CLI Commands
Init
maverick init <path> [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
maverick sass -c "responsive-img"
Pug
maverick pug [File name]
to create a pug page
Options:
-t
or--title <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.