Front-End Project Engineering (Yo+grunt/gulp+bower)

The so-called engineering, is the disorderly, complex operations organized, the use of tools to simplify, standardize the process, so as to achieve project construction, development, maintenance of the integration process.

As far as the front end is concerned, the more popular project building tools are now yoeman,grunt,gulp,bower. This article will describe how to use yoeman,grunt/gulp,bower to create a front-end project.

First, preparatory work

1, install node.js, download the DMG package on the website and install it. After installing Node.js, you can use the NPM command at the command line to install additional kits. (Npm:node Package Manager)

2, install Yo, grunt, Bower, installed on the command line via the NPM command: sudo npm install–g yo grunt-cli Bower, you can start building your project once you've installed it.

3, install Generator-webapp, use command: sudo npm install–g generator-webapp,generator-* is a rapid development framework provided by Yoeman, similar to maven-webapp,maven- Java, is a project template, such as Generator-webapp,generator-angular,generator-react-fullstack, Generator library: http://yoeman.io/generators/. (Note: After generator-webapp@v0.6.2, the build tool used by default is gulp instead of grunt)

4, install generator-angular, use command: sudo npm install–g generator-angular.

5, install compass, use command: sudo gem install compass (gem is Ruby command, Mac has integrated Ruby, so no need to reinstall Ruby.) ）

(Learn about Yo+grunt/gulp+bower:

Yoeman is developed by Google's team and external contributor team, developed in collaboration with Yo+grunt/gulp+bower three tools, yo[scaffolding, automation tools],grunt/gulp[build tools, compress js/css/images, etc.],bower [Package management tools, like the Java back end of Maven, is the familiar dependencies]. Another: Gulp is based on the concept of Stream[unix flow] work, compared to grunt faster, and installation is simple, the API is also more refined, GitHub many projects have moved from grunt to gulp.

Ii. Project Construction (yo+gulp+bower)

1, create a new bookstore folder in Workspace: MkDir bookstore, then CD Bookstore

2, create the project, use the command: Yo WebApp Bookstore, screenshot as follows:

Project directory:

3, run: Gulp serve, then Webstorm will automatically open the browser, display index.html. The following figure:

Web page:

Iii. Project Construction (yo+grunt+bower)

1, with the top 1.

2, create the project, use the command: Yo angular bookstore, screenshot as follows:

Project directory:

3, run the project, use the command: Grunt serve, found the following problems:

Run command: NPM install Grunt–save-dev

Run again: Grunt-serve, found that there is still a problem: "NotFound modudle * * * *", that is not installed the corresponding module,

Then run: NPM Install–save-dev This need a little time, should need to install the corresponding modules, although I do not know what the specific module, feel the use of grunt this is not very good, too many modules, can not automatically create Bower_ Compoents directory and run Bower, all need to be manual, as the following questions.

Then there is the following question:

You need to run: mkdir bower_components, and then run: Bower install--save-dev The following figure requires a change of command.

After Bower Install–save-dev, the file directory structure:

4, run: Grunt serve can see the project page in the browser

Now that the project has been built, the next thing is coding, and then using Nodejs to create the Http-server to complete the automated test at the front end. In the next article I will continue to use this bookstore project to describe how to create a http-server using Nodejs.