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
yo webappto scaffold your webapp
gulp serveto preview and watch for changes
bower install --save <package>to install frontend dependencies
gulp serve:testto run the tests in the browser
gulpto build your webapp for production
gulp serve:distto 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
folder on running
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!