generator-modern-frontend

Yeoman generator that scaffolds out a modern front-end web app using gulp. Inspired by generator-gulp-webapp.

Features

• Browserify + ES6 (babelify)
• Pick your favorite CSS pre-processor (Sass, Stylus or Less)
• CSS Autoprefixing
• Sourcemaps for CSS and JavaScript
• Built-in preview server with BrowserSync
• Image optimization
• Wire-up dependencies installed with Bower

You may opt-out from using bower, sprite generation and image optimization if you don't need them.

Sprite sheet

For sprite generation, you'll need to create a directory for each sprite category on app/images/sprites/. It will generate its respective stylesheet and sprite sheet files as the following:

• app/images/sprites/general/*.png generates:
  • css/sprites/general.styl
  • images/sprites_general.png
• app/images/sprites/heavy_stuff/*.png generates:
  • css/sprites/heavy_stuff.styl
  • images/sprites_heavy_stuff.png

Please see our gulpfile.js for up to date information on what we support.

For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json.

Getting Started

• Install dependencies: npm install --global yo bower
• Install the generator: npm install --global generator-modern-frontend
• Run yo modern-frontend to scaffold your webapp
• Run npm start to preview and watch for changes
• Run bower install --save <package> to install frontend dependencies
• Run gulp to build for production

Bower components

This generator includes the following Bower components by default:

• Modernizr
• normalize.css

Read the details about our Bower setup.

Options

• --skip-install Skips the automatic execution of bower and npm after scaffolding has finished.

License

BSD license