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.
- 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
On macOS, Linux, or Windows run the following:
npm install -g maverick-cliThat is it!
gulp serveto preview and watch for live changesgulporgulp buildto build the app for productiongulp serve:distto preview the production build
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.
maverick sass [options] [File name] - create a SCSS file.
Options:
Options argument is required.
-cor--componentto add a component, this also adds a css selector.-eor--elementto add an element-tor--toolto add a tool-uor--utilityto add a utility-por--pluginto add a plugin
Example
maverick sass -c "responsive-img"maverick pug [File name] to create a pug page
Options:
-tor--title <title>to add a title to the page
If you don't provide the title it will be empty.
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.
If the project hasn't been generated by Maverick CLI commands (scss, pug) won't work.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent