Yeoman was developed by the Google team in collaboration with a team of outside contributors, His goal was to create an easy-to-use workflow for developers wrapped around Grunt, a command-line tool for development task automation, and Bower, a package manager for front-end resources such as HTML, CSS, Javascript, and images.
\
Yeoman’s aim is not only to establish a workflow for new projects, but also to solve many of the serious problems faced by front-end development, such as fragmented dependencies.
\
Yeoman consists of three main parts: Yo (scaffolding tool), Grunt (Build tool), and Bower (package manager). These three tools were developed independently, but need to work together to achieve our efficient workflow pattern.
\
The following picture vividly illustrates the cooperative relationship among the three.
The characteristics of YOMAN
\
Lightning-fast initialization: At the start of a project, you can quickly build your project initialization based on existing template frameworks such as HTML5 Bolierplate, Twitter Bootstrap.
Great build process: not only JS and CSS code compression and consolidation, but also image and HTML file optimization, as well as compilation of CoffeScript and Compass files.
Automatic compilation of CoffeScript and Compass: The LiveReload process automatically compiles changes to source files and then refreshes the browser.
Automatic Lint Code: JSLint tests are automatically performed on JS code to ensure that the code complies with best programming practices.
Built-in preview server: No need to configure your own server, you can use the built-in preview server quickly.
Amazing Image optimization: Reduce download consumption by optimizing images using OptiPNG and JPEGTran.
Killer package management: With Bower Search jQuery, you can quickly install and update related files without having to open a browser to search for them yourself.
PhantomJS unit Testing: It is very easy to use PhantomJS for unit testing, and everything is ready at the beginning of the project.
\
Preparation before installation
\
Check if node.js, Ruby, Compass are installed on your system.
\
/usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin = /usr/local/bin
\
Mac Mountain Lion comes with Ruby, so you don’t need a separate installation.
\
Compass installation relies on Ruby Gems, perform the following steps:
sudo gem update –system
sudo gem install compass
\
The installation
\
Once the environment is ready to install, execute:
sudo npm install -g yo grunt-cli bower
\
After the installation is successful, you will see the following prompt:
use
\
By implementing Yo WebApp, we can quickly create a new Web application framework. A common workflow is as follows:
\
\
The project practice
\
This article takes a real project and uses Yeoman to build a simple Blog page:
\
After the environment was ready, we started our own project development. First, we prepared a directory for our project. Here is rivertown.sinaapp.com.
Then the first step is a quick initialization with Yo, which asks if we are using the Bootstrap and RequireJS frameworks, which I chose to do here. After that, the basic framework of a Web application is established.
\
The initial WebApp directory structure is as follows. The app directory is the home directory of our project, and some JS unit test files corresponding to the test directory.
Note that we need to install NPM and Bower locally to the project.
\
Modify page files and styles.
\
Preview and test the page. When we get to the point where we need to test the page, we need Grunt to do this:
Soon, our page will be visible in the browser.
\
What’s more, once we edit the project source file and switch to Safari, we can see the changes immediately, without having to manually refresh the page!
If we want to test the JS, we have to install PhantomJS locally with NPM and then execute the Grunt test.
\
The final step is to compile the project, execute grunt to create the project in the dist directory. If phantomJS does not have an error, execute grunt –force to skip this step.
If you look at the content in main.css and main.js, you can see that the content has been optimized.
\
Experience with
\
After a trial in the afternoon, first of all, there is such an integrated construction, development, compilation process, feeling very novel, compared with the traditional development mode. I need to first decide which frameworks to use, then collect the source code for each site, integrate it, deploy a test Web server, whether it’s Apache, Nginx or Xampp, and finally optimize the code. Now, after using Yeoman, all these tasks are automated and streamlined, and I just need to follow the established steps. Yeoman has done a lot of things for me, saving a lot of effort for front-end development. Also, the quality of the generated code is pretty good.
\
Unfortunately, Yeoman still has few relevant materials, and very few materials in Chinese. We still need to study how to further study and customize Yeoman.
\
PS: To make fun of Baidu, I have to say that Baidu is really not a good choice for IT workers. When I typed Yeoman, except for the two introductory articles of Infoq, the rest of the content was almost nowhere near what I needed.
\
References:
Yeoman: Modern workflow for modern Web applications
2, Yeoman. IO
3, Nodejs.org
4, Compass
Yeoman Get Started with 1.0
\
Front-end, workflow