{"id":21553,"date":"2018-07-04T18:19:12","date_gmt":"2018-07-04T10:19:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21553"},"modified":"2021-01-05T22:14:10","modified_gmt":"2021-01-05T14:14:10","slug":"yeoman-getting-started","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/","title":{"rendered":"How to Streamline Web Development Workflow with Yeoman"},"content":{"rendered":"

There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do repetitive tasks when building web apps<\/strong> such as creating files, creating folders, installing a number of front-end libraries. Wouldn\u2019t it better if we can streamline this task to save time?<\/p>\n

We can with a handy tool called Yeoman, created by Addy Osmani<\/a>. In this post, we will see how Yo, Bower and Grunt can work together, under Yeoman, to facilitate the project from the beginning of development till deployment of the web app.<\/p>\n

Recommended Reading: <\/strong>How To Install, Update & Remove Web Libraries Easily With Bower<\/a><\/p>\n

About Yeoman<\/h2>\n

Yeoman contains three front-end development tools:<\/p>\n

Yo<\/h3>\n

Yo provides a number of Generators that generate the scaffold for building new web applications<\/strong>. There are about 400 Generators available, which you can search and install through NPM (Node Package Manager). There a many generators provided to cater different types of web applications, such us HTML5 Boilerplate, AngularJS, Bootstrap, etc. And you can, in fact, build your own custom Generator if you wish.<\/p>\n

Bower<\/h3>\n

With Bower, a front-end Package Manager, you can manage project libraries<\/a> e.g. jQuery and Normalize.css or other libraries you usually use on your website.<\/p>\n

Grunt<\/h3>\n

Grunt reduces the effort needed to do some tasks during the development process. Tasks like minfying and concatenating javascipt, generating CSS of LESS or SASS, compressing CSS, and optimizing images can be done automatically with Grunt.<\/p>\n

Yeoman comes with the configuration of these three front-end development tools preset. Yeoman provides the scaffold, and package manager, and sets all the Grunt tasks<\/a> for compiling CSS-Preprocessors<\/a>, linting<\/a><\/em> scripts<\/a>, running built-in server, optimizing your images<\/a>, etc.<\/p>\n

\"yeoman<\/figure>\n

Getting Started With Yeoman<\/h2>\n

Yeoman runs on Node.js<\/a>, so make sure that you have installed Node.js and npm<\/code> first. Then to install Yeoman<\/strong> simply run this command within the Command Prompt or Terminal:<\/p>\n

npm install -g yo<\/pre>\n
This command installs Yo, Bower, and Grunt all together.<\/p>\n
After installing Yeoman, we can start off a web-app project using the command lines. Yo<\/strong>, as we mentioned above, helps you to generate the scaffold for your web application with the Generators<\/a>. As an example, here we will install one of Yeoman\u2019s official Generators called generator-webapp<\/strong>. <\/span><\/p>\n
npm install -g generator-webapp<\/pre>\n
This command will download several components that are commonly used for creating a web application namely HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap.<\/p>\n
Now once all the components from the generator-webapp<\/strong> have been downloaded, create a folder for your application and then run yo webapp<\/code> command<\/strong> within that folder to start generating the scaffold for your new web application project.<\/p>\n
Yeoman will set your project with the components from generator-webapp<\/strong>, and will ask you which library you prefer to use in the project, as shown in the following screenshot. Make your choices and in your folder, you will find all files nicely structured with Bower and Grunt.<\/p>\n
\"yeoweb<\/figure>\n
Generating Bootstrap through Yeoman<\/h2>\n
Now we will try another Generator<\/a> provided by community called bootstrap-less<\/strong>. This generator contains HTML5 Boilerplate, jQuery, Modernizr, Bootstrap, FontAwesome, and a Grunt task that will compile LESS into CSS.<\/p>\n
To install this Generator, run this command:<\/p>\n
npm install -g generator-bootstrap-less<\/pre>\n
Similarly, create a new folder for your project. Then jump to the folder and run this command to generate the scaffold for your web application with Bootstrap:<\/p>\n
npm bootstrap-less<\/pre>\n
Once again, we will interact with Yeoman\u2019s prompts to select the components required for running the project. As you can see below, you can select Bootstrap JavaScript files and FontAwesome together.<\/p>\n
\"Yeoman's<\/figure>\n
After you are done, let\u2019s revisit the project folder. You should now find the folder and files generated, like so:<\/p>\n
\"The<\/figure>\n
This project has also been equipped with Grunt server, which allows us to run a local web server for our web application. We can run the server using this command:<\/p>\n
grunt serve<\/pre>\n
Once done, the page will open on the browser immediately. This command will also watch our files if there are any changes on the development process. Bootstrap-less generator comes with configurations that auto compile LESS files.<\/p>\n
Go to folder app\/styles<\/strong> to find the main.less<\/strong> file. From here we can modify this file, Yeoman process it and the browser will auto-reload the page and we will see the changes.<\/p>\n
\"The<\/figure>\n
Lastly, we use the grunt<\/code> command to build our application.<\/p>\n
Final Thought<\/h2>\n
Yeoman is an all-in-one tool for developing a web application. It helps you to be more efficient in terms of starting off on a new web application project, and gets all the tools ready for generating the scaffold, testing, and deploying the web application so you can focus on just your coding.<\/p>","protected":false},"excerpt":{"rendered":"
There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do repetitive tasks when building web apps such as creating files, creating folders, installing a number of front-end libraries. Wouldn\u2019t it better if we can streamline this task…<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2856,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Streamline Web Development Workflow with Yeoman - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Streamline Web Development Workflow with Yeoman\" \/>\n<meta property=\"og:description\" content=\"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-04T10:19:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-05T14:14:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Streamline Web Development Workflow with Yeoman\",\"datePublished\":\"2018-07-04T10:19:12+00:00\",\"dateModified\":\"2021-01-05T14:14:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/\"},\"wordCount\":769,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yeoman-getting-started\\\/yeoman-workflow.jpg\",\"keywords\":[\"Dev Tools\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/\",\"name\":\"How to Streamline Web Development Workflow with Yeoman - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yeoman-getting-started\\\/yeoman-workflow.jpg\",\"datePublished\":\"2018-07-04T10:19:12+00:00\",\"dateModified\":\"2021-01-05T14:14:10+00:00\",\"description\":\"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yeoman-getting-started\\\/yeoman-workflow.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/yeoman-getting-started\\\/yeoman-workflow.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/yeoman-getting-started\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Streamline Web Development Workflow with Yeoman\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Streamline Web Development Workflow with Yeoman - Hongkiat","description":"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/","og_locale":"en_US","og_type":"article","og_title":"How to Streamline Web Development Workflow with Yeoman","og_description":"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do","og_url":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-07-04T10:19:12+00:00","article_modified_time":"2021-01-05T14:14:10+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Streamline Web Development Workflow with Yeoman","datePublished":"2018-07-04T10:19:12+00:00","dateModified":"2021-01-05T14:14:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/"},"wordCount":769,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg","keywords":["Dev Tools","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/","url":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/","name":"How to Streamline Web Development Workflow with Yeoman - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg","datePublished":"2018-07-04T10:19:12+00:00","dateModified":"2021-01-05T14:14:10+00:00","description":"There are many tools for building web-apps yet putting them all together and making them fit in our workflow could be real cumbersome. We also tend to do","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/yeoman-getting-started\/yeoman-workflow.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/yeoman-getting-started\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Streamline Web Development Workflow with Yeoman"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5BD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=21553"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21553\/revisions"}],"predecessor-version":[{"id":52811,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21553\/revisions\/52811"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21553"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}