Getting Started with Yeoman Webapp Generator

I recently started using Yeoman’s Webapp Generator for building front end web apps. Its a gulp.js generator for modern webapps. Here’s how you can get started with it. A gist of steps to get you started are listed below.

  • Install dependencies: npm install --global yo gulp-cli bower
  • Install the generator: npm install --global generator-webapp
  • Run yo webapp to scaffold your webapp
  • Run gulp serve to preview and watch for changes
  • Run bower install --save <package> to install frontend dependencies
  • Run gulp serve:test to run the tests in the browser
  • Run gulp to build your webapp for production
  • Run gulp serve:dist to preview the production build

Once you create a project with yeoman’s webapp generator and start browsing the project directory, you will find build comments in the html files.

<!-- build:css styles/vendor.css -->
<!-- bower:css -->
// css files here
<!-- endbower -->
<!-- endbuild -->

Any CSS files you include between the comments, will be built as vendor.css file in /dist
folder on running

gulp build

Similarly for JS files you could have,

 <!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/lodash.js"></script>
<!-- endbower -->
<!-- endbuild -->

As a convention vendor.js and vendor.css are used to bundle third party JS and CSS files. To bundle your own JS files you could use to bundle the files used in index.js as index-bundle.js,

<!-- build:js scripts/index-bundle.js -->
<script src="scripts/requests.js"></script>
<script src="scripts/webcam.js"></script> 
<script src="scripts/index.js"></script>
<!-- endbuild -->

Have fun using Yeoman’s webapp generator.

This content has been helpful to you?

Thanks for contributing!

Yes No