开始使用yeoman

开始使用yeoman

yeoman其实就是个工作流，由3部分组成，yo, bower, grunt。

yo是一个脚手架工具，用于创建项目脚手架。

bower就是前端的依赖加载工具，类似于npm。

grunt是构建工具，类似于gulp。

 

第一步，安装yo,以及需要依赖的工具

npm install -g yo bower grunt-cli gulp

 

第二步，安装项目脚手架生成器

npm install -g generator-webapp

有很多开源的脚手架生成器供我们自由安装，类似与angular项目的话，我们可以安装generator-angular.

 

第三步，创建一个项目文件夹

md my-yo-porject

cd my-yo-project

 

第四步，运行项目

yo webapp

类似与angular项目的话，就执行yo angualr

在angular项目中，我们还可以单独构建其中某一部分，例如：

yo angular:controller myController

yo angular:directive myDirective

yo angular:filter myFilter

yo angular:service myService

 

bower是一个包管理器，能够让你更容易管理项目中的依赖，包括javascript,images,css 这个项目是有twitter维护的。

主要的命令有：

bower serch <dep>

bower install <dep>...<depN>

bower list   //罗列出你的项目中已经安装的依赖包

bower update <dep> //更新某个依赖到最新版本

 

一个正常的开发流程命令如下：

yo webapp

bower search jquery-pjax

bower install jquery-pjax --save

如果项目中有用到requireJS,则执行：

grunt bower //这样会将bower的依赖项全部插入到requireJS的配置中

如果项目中没有用到requireJS，则执行：

grunt wiredep  //这样会将依赖项目插入到index.html页面中

你选择的生成器有可能不会包括grunt task的bower和wiredep,因此，你可能需要手动安装这两项任务：

npm install grunt-bower-requirejs --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-bower-requirejs');

参考：https://github.com/yeoman/grunt-bower-requirejs

npm install grunt-bower-requirejs --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-bower-requirejs');
参考：https://github.com/stephenplusplus/grunt-wiredep

 

grunt简单命令：

grunt server //preview an app you have generated (with livereload)

grunt test  //run the unit tests for an app

grunt //build an optimized, production-ready version of your app

 

总的来说，工作流程如下：

yo webapp

grunt server

grunt test

grunt

 

grunt使用说明：

项目根目录中需要两个文件：package.json和Gruntfile(文件名为Gruntfile.js或者Gruntfile.coffee)

package.json被npm用于存储项目的元数据，以便将项目发布为npm模块，可以在这个文件中列出项目依赖的grunt和

grunt插件，放置在devDependencies配置中。

Gruntfile用于配置或定义任务，并加载grunt插件的。

只需要一个简单的命令，就可以自动生成一个package.json文件：

npm init

package.json代码样例如下：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

向package.json中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令来安装模块，

安装完模块后会自动将其天道devDependencies配置段中。

Gruntfile由以下几部分构成：

• "wrapper" 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

 

一份简单的grunt文件如下：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

需要特别注意的是第十行，build为子任务的名称，这个名称可以换位其他任意的字符串，但是不能缺少，一定要有，同时也可以在uglify内再多写几个子任务，在执行任务的时候，如果需要指定执行某个子任务，可以这样做：grunt.registerTask('default', ['uglify:build']);

只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

grunt.loadNpmTasks('grunt-contrib-uglify');

使用grunt --help可以列出所有可用的任务。

 

自定义任务

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且他甚至不依赖任务配置：

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks方法加载。

 

帮助工具：

1.sublime text sass预编译工具（转自http://www.w3cplus.com/sassguide/install.html）；

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

 

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

然后直接在命令行中输入

gem install sass

按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

如果要安装beta版本的，可以在命令行中输入

gem install sass --pre

你还可以从sass的Git repository来安装，git的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

升级sass版本的命令行为

gem update sass

查看sass版本的命令行为

sass -v

你也可以运行帮助命令行来查看你需要的命令

sass -h

淘宝RubyGems镜像安装 sass

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

 

安装完成后，在sublime Text通过package install来安装sass builder来使用预编译功能。快捷键为ctrl + B;


2.autoPrefixer
这个sublime text插件可以帮助优化css代码，能够自动补全css3前缀；
改插件要求系统装有nodejs环境；
使用方式：
按 Ctrl + Shift + P，然后选 Autoprefix CSS 或者设置键盘快捷键 – “Preferences > Key Bindings – User”
Preferences -> Key Bindings – User 新增

[
    { "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
]