ready-to-use frontend workflow
Powerful compilation, asset optimization and stuff for everyone.
Already set up, just grab and play.
Why would we do this?
tl;dr SSD space is precious, time is priceless and mango-cli
saves both.
- Our projects are repeatedly based on the same technologies. So we made conventions.
- Conventions also come in handy when you get into a running project and you already know where to find things. And also when your freshly-hired developer initializes a new project.
- Grunt/Gulp save local dependencies nicely into
node_modules
directory. Some of us develop a lot of projects paralelly and these packages take so much of our precious SSD space. Somango-cli
stores common tasks globally (we know the risks… but let's be pragmatic). - We are writing an article about this tool. Stay tuned…
Installation
Install mango-cli once from npm
and use it everywhere.
npm install -g mango-cli
It will take a while. Go get a cup of coffee ;)
Usage
mango init [your-project-name]
initialize an example projectmango init --source [user/repo] [project-name]
initialize a project by forking an existing Github repository.mango install
dependency installationmango build
production buildmango dev
development mode with watch and stuff.
Feel free to use mango [command] -h
for detailed instructions.
Configuration
Your mango.json
may look like this.
{ "src_folder": "src", "dist_folder": "dist", "styles": [ "src/styles/screen.styl", "src/styles/admin.styl", "src/styles/print.styl" ], "scripts": [ "src/scripts/index.js" ], "images": [ "src/images/**/*.{jpg,png,svg}" ], "templates": [ "src/**/*.{jade,html}" ], "dependencies": [ "jquery" ] }
Managing project dependencies
mango install [packages...]
Installs frontend packages from NPM and stores them in ./node_modules
directory, from where you can require
them (thanks to Browserify).
Maintain current dependencies in mango.json
config file under the dependencies
section.
Under the hood
Styles
- Stylus
- LESS
- Sass
- Autoprefixer
- Clean CSS
Templates
- Jade
Scripts
- React + JSX
- CoffeeScript
- Browserify
- UglifyJS
Tools
- BrowserSync
- Gulp
- Imagemin
- Sourcemaps