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_modulesdirectory. Some of us develop a lot of projects paralelly and these packages take so much of our precious SSD space. Somango-clistores 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 installdependency installationmango buildproduction buildmango devdevelopment 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