開始使用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代碼樣例以下：

 1 {
 2   "name": "my-project-name",
 3   "version": "0.1.0",
 4   "devDependencies": {
 5     "grunt": "~0.4.5",
 6     "grunt-contrib-jshint": "~0.10.0",
 7     "grunt-contrib-nodeunit": "~0.4.1",
 8     "grunt-contrib-uglify": "~0.5.0"
 9   }
10 }

向package.json中添加Grunt和grunt插件的最簡單方式是經過npm install <module> --save-dev命令來安裝模塊，

安裝完模塊後會自動將其天道devDependencies配置段中。

Gruntfile由如下幾部分構成：

• "wrapper" 函數
• 項目與任務配置
• 加載grunt插件和任務
• 自定義任務

 

一份簡單的grunt文件以下：

 1 module.exports = function(grunt) {
 2 
 3   // Project configuration.
 4   grunt.initConfig({
 5     pkg: grunt.file.readJSON('package.json'),
 6     uglify: {
 7       options: {
 8         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 9       },
10       build: {
11         src: 'src/<%= pkg.name %>.js',
12         dest: 'build/<%= pkg.name %>.min.js'
13       }
14     }
15   });
16 
17   // 加載包含 "uglify" 任務的插件。
18   grunt.loadNpmTasks('grunt-contrib-uglify');
19 
20   // 默認被執行的任務列表。
21   grunt.registerTask('default', ['uglify']);
22 
23 };

須要特別注意的是第十行，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 任務，而且他甚至不依賴任務配置：

1 module.exports = function(grunt) {
2 
3   // A very basic default task.
4   grunt.registerTask('default', 'Log some stuff.', function() {
5     grunt.log.write('Logging some stuff...').ok();
6   });
7 
8 };

特定於項目的任務沒必要在 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

1 $ gem sources --remove https://rubygems.org/
2 $ gem sources -a https://ruby.taobao.org/
3 $ gem sources -l
4 *** CURRENT SOURCES ***
5 
6 https://ruby.taobao.org
7 # 請確保只有 ruby.taobao.org
8 $ gem install sass

 

安裝完成後，在sublime Text經過package install來安裝sass builder來使用預編譯功能。快捷鍵爲ctrl + B;


2.autoPrefixer
這個sublime text插件能夠幫助優化css代碼，可以自動補全css3前綴；
改插件要求系統裝有nodejs環境；
使用方式：
按 ，而後選  或者設置鍵盤快捷鍵 – 「Preferences > Key Bindings – User」
Preferences -> Key Bindings – User 新增Ctrl + Shift + PAutoprefix CSS

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