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.

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

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