Yeoman, Bower and grunt of the front-end engineering development

Front-end framework for react, Vue, angular, etc., with Webpack, gulp, browserify, FIS and other building tools to meet the day-to-day development work

Http://www.cnblogs.com/luozhihao/p/4818782.html (front-end modular development)

Http://www.cnblogs.com/luozhihao/p/4848709.html (front-end automation development)

The process of building a project's front-end, using tools (Yeoman, Bower, Grunt),

About these three tools here is no introduction,

Yeoman (Scaffold tool): http://yeoman.io/

Bower (Package management tool): http://bower.io/

Grunt (Build tool): http://www.gruntjs.net/

First, preparatory work

(1) First have to install Nodejs, from Nodejs official website download installation package http://nodejs.org/directly to install, I believe it will soon be able to complete the installation

(2) Install Yo, grunt, Bower

Open Terminal input Global Install command and execute: npm install-g yo grunt-cli Bower

　　

Once the installation is complete, you can start building the project.

Ii. Construction of the project

(1) Under F Disk, create the new test folder and execute the command: MD test

　　

(2). Installation Generator

Enter the yo command at the command prompt

　　

With the up and down key to select Install a generator, we choose to install WebApp Generator, input webapp, select WebApp

　　

Next we use Yeoman to create the project

5.Yeoman use

Create a working directory for storing yeoman projects. I under D disk new Angularjs WebApp working directory, terminal entry, input yo command, with the up and down key to select WebApp

(6) Generate the project directory and file, execute the command: Yo WebApp

　　

In this step, the custom installation options (bootstrap, Sass, Modernizr) will appear, and if the item needs to be selected, press the "SPACEBAR" key to toggle the selection mode, press "enter" to continue, and the installation will wait for some time.

(3) Install local bower and NPM, execute commands: NPM install && Bower Install

　　

(4) Use Bower to install project other files, such as jquery, execute command: Bower install jquery

　　

The directory for the entire project is as follows:

　　

(5) Establish a local test server to execute the command: Grunt server

　　

At this time the browser will automatically open the project page for us, remember not to close the current CMD window, grunt will automatically detect whether the local file is modified, so that once we save the modified project file, the browser can automatically refresh the page for us, do not need us to manually refresh the page.

Reprint: Yeoman, Bower, grunt of front-end engineering development