Yeoman（Yo、Grunt、Bower）,node.js学习笔记

今天终于在Win7环境下完成了NodeJs、Yo(来自Yeoman的脚手架工具)、Grunt（构建工具）、Bower（包管理工具）的安装和简单部署，虽然只是前端工程化的一小步，但是已让我有点小兴奋。
O(∩_∩)O哈哈~

再也不用到YUI Compressor上去压缩JS&CSS；
再也不用把png图片一个个拖到TinyPNG进行在线压缩（和熊猫哥哥说再见了）；
再不用把JPG/JPEG图片拖 JPEGMini（这个软件花了$19.99购买）软件里面压缩

如下便是我今天的小小尝试：

• 安装NodeJs

从NodeJs官网下载安装包 http://nodejs.org/ 直接进行安装，相信很快就能完成安装

• 安装Yo、Grunt、Bower

直接打开NodeJs的命令行界面

输入如下代码：（“-g” 代表全局安装）

npm install -g grunt-cli bower

安装完成后，进入基本的脚手架安装

为了搭建一个web应用脚手架，你将需要安装generator-webapp生成器：

npm install -g generator-webapp

这是默认的web应用生成器，它将搭建一个项目脚手架包括HTML5 Boilerplate，jQuery，Modernizr，还有Bootstrap。在交互的提示中你可以选择不包含它们中的一些。

现在生成器已经安装好了，为你的项目创建一个新的目录，

mkdir my-yo-project

cd my-yo-project

然后运行：

yo webapp

每一个由yo创建的项目也将会pull相关的Grunt任务，这些任务是社区认为对你的工作流是需要的或者有用的。
对于web应用来说，这个webapp生成器被认为是最简单可行的一个开始。它也提供了一些框架生成器，它们可以被用来搭建项目脚手架以及之后的视图，模型，控制器等等。

上面一段基本来自Yeoman的中文文档，详细的内容可以到该网站去了解。

如上，只要一步一步进行就可以了，基本上不会有错误。

接着，你需要测试下你的工具是否安装正确：运行如下命令：

grunt server

这实际上是运行你的站点，中间会出现找不到“Imagemin”，但程序仍然会继续运行到：默认浏览器弹出：
http://localhost:9000/

这证明你的安装没有问题。

“Imagemin”的问题，我们还没有解决，这是一个相当给力的压缩插件，能对JPEG&PNG进行非常高压缩比的压缩，只需要运行命令行，一步完成所有图片压缩（妈妈再也不用担心你做重复工作了）。

安装 imagemin 插件

命令行下切换到你的项目文件夹，

cd projectName

输入以下命令进行安装：

npm install grunt-contrib-imagemin --save-dev

配置压缩图片任务

接下来配置 Gruntfile.js （这个文件可在你的项目文件夹找到），定义优化图片大小的任务：

module.exports = function (grunt) {    'use strict';    grunt.initConfig({        imagemin: {          dist: {            options: {                optimizationLevel: 3 //定义 PNG 图片优化水平    （1）            },            files: [{              expand: true,              cwd: '<%= config.app %>/images',   // 优化 img 目录下所有 png/jpg/jpeg 图片              src: '{,*/}*.{gif,jpeg,jpg,png}',              dest: '<%= config.dist %>/images'   // 优化后的图片保存位置，覆盖旧图片，并且不作提示            }]          }        },    });    grunt.loadNpmTasks('grunt-contrib-imagemin');             （2）    grunt.registerTask('img', ['imagemin']);                  （3）};

<%= config.app %>/images 指的是你的项目目录app/images
<%= config.dist %>/images 指的是你的项目目录dist/images

实际上别的都不用管，只需要添加以上代买的（1）（2）（3），自己看一看，你就知道它们应该放到Gruntfile.js的哪个位置了。

接下来运行命令：

grunt imagemin

你的图片立马被压缩了，我用原来方法JPEGmini压缩的一张图199KB，用该命令行运行压出来却是154KB，感觉很给力。图片压缩的比率非常可观。之后再使用 Google PageSpeed （需要翻墙进入）工具检测，就不再提醒我们压缩图片。

整个过程其实还是很简单的，但是如果你是第一次，可能会有些小负担，所以动手试试，不要让小问题阻挡了你的进步。

哈哈，其实以上都是来自百度，如下是我觉得比较有用的站点汇总，你可以进一步学习。

1. Yeoman中文文档：http://yeomanjs.org/gettingstarted.html
2. Grunt中文：http://www.gruntjs.org/docs/getting-started.html
   （这个貌似翻墙会更流畅）
3. Grunt中批量无损压缩图片插件安装－Grunt-contrib-imagemin
   ：http://handyxuefeng.blog.163.com/blog/static/45452172201391415246847/
4. Bower介绍：http://blog.javachen.com/2014/05/10/bower-intro/

不要再让自己作为前端工程师Out了，行动起来！O(∩_∩)O哈哈~