yeoman生成自己項目文件腳手架(react)

準備做React+Backbone的集成開發，同事之前已經做了自定義Backbone的腳手架，我今天來做React的。

準備工作，安裝Node,yeoman就不多說了，什么？不會？你做什么自定義腳手架啊，先自行google去吧

1.安裝目錄我的目錄是：home/mike/mywork/study/gitcode/

2.安裝generator 安裝:
在命令行輸入：npm install -g generator-generator
說明： yo generator 生成器一個新的生成器的向導
yo generator:subgenerator Name 一個以Name為名字的子生成器

步驟一：
在命令行輸入yo generator
按照向導提示輸入，我的generator的名字叫reacttiny 第一步寫github名字（不填寫也可以），第二步寫上reacttiny即可，然后其他默認之后就等待生成對應的generator-reacttiny目錄目錄內容如下：

.
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           ├── _bower.json
│           ├── _package.json
│           ├── editorconfig
│           └── jshintrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .travis.yml
├── .yo-rc.json
├── package.json
├── README.md
└── test
    └── test-app.js

步驟二：這時候，cd 進入generator-reacttiny目錄，我們在命令行輸入:npm link，就可以在命令行使用這個生成器了

步驟三：此時，命令行輸入：yo reacttiny嘗試一把看看，就可以看到yeoman大爺了。。。

我們當然可以直接在app的index里開發我們的生成器了，使用的時候直接使用yo reacttiny即可，但是我要做好幾個自定義生成器那怎么辦呢？

步驟四：命令行目錄還在generator-reacttiny下，在命令行輸入 yo generator:subgenerator react
注意， yo generator:subgenerator是命令，react就是我們子生成器的名字。之后會在generators目錄下自動生成相應的模板文件，和app目錄一模一樣，此時文件夾名稱叫做react

步驟五：此時就可以在react目錄下開發了，其實腳手架目的是根據用戶在控制臺的輸入編寫模板文件，最后生成模板文件。

3.用到的包有：handlerbars,open,react,rimraf,chalk,mocha,yosay,yeoman-generator

4.generator方法的執行順序

對于那些會自動執行的函數，他們是有一個優先順序的，下面這些函數是按順序的一個一個執行的。

• initializing - 你的初始化函數，就是構造函數，主要就是檢查一下參數什么的
  • prompting - 給用戶展示你的菜單，選點東西什么的
• configuring - 保存配置信息，創建類似.editorconfig的文件
• default - 就是默認，只要不在這個列表里的函數都在這個位置執行
• writing - 創建模板文件
• conflicts - 處理異常和沖突
• install - 裝npm和bower依賴什么的
• end - 打個命令行祝賀使用者成功了

5.上傳到npm 如果想將此包上傳到npm上，則需要在命令行中的generator-reacttiny目錄下輸入
npm adduser無注冊用戶，按提示步驟先增加個用戶
npm login有注冊，用戶先登錄
npm publish --access=publish發布即可

PS:在grunt中加入自動編譯Jsx文件插件前提使用yeoman構建了項目

1.在Gruntfile.js文件目錄下，安裝grunt-react和grunt-browserify
命令行輸入：npm install grunt-react --save
npm install grunt-browserify --save

2.在Gruntfile.js的watch中增加以下代碼，自動監聽編譯jsx代碼為js代碼 指定react的jsx目錄

watch: {
      react:{
        files: ['<%= config.app %>/react/{,*/}*.jsx'],
        tasks: ['react:dynamic_mappings', 'react:single_js_files']
      },
      browserify:{
        files: ['<%= config.app %>/react/{,*/}*.jsx'],
        tasks: ['browserify:options']
      }
}

3.在Gruntfile.js的initConfig中增加react和browserify 指定react的jsx目錄和js的輸出目錄

 grunt.initConfig({
react: {
      single_js_files: {
        files: {
          '<%=config.app%>/react/output/hello.js': '<%=config.app%>/react/hello.jsx'
        }
      },
      combined_file_output: {
        files: {
          'path/to/output/dir/combined.js': [
            'path/to/jsx/templates/dir/input1.jsx',
            'path/to/jsx/templates/dir/input2.jsx'
          ]
        }
      },
      dynamic_mappings: {
        files: [
          {
            expand: true,
            cwd: '<%=config.app%>/react',
            src: ['**/*.jsx'],
            dest: '<%=config.app%>/react/output',
            ext: '.js'
          }
        ]
      }
    },
    browserify: {
      options: {
        transform: [ require('grunt-react').browserify ]
      },
      app: {
        src: '<%= config.app %>/react/hello.jsx',
        dest: '<%= config.app %>/react/output/dist/hello.js'
      }
    },
});

4.在Gruntfile.js中加入以下兩行，加載兩個任務

grunt.loadNpmTasks('grunt-react'); grunt.loadNpmTasks('grunt-browserify');

5.在grunt:serve這里加上 'react'和'browserify'

grunt.registerTask('serve', 'start the server and preview your app', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'browserSync:dist']);
    }

    grunt.task.run([ 'clean:server', 'wiredep', 'concurrent:server', 'postcss', 'browserSync:livereload', 'watch', 'react', 'browserify'  ]);
  });

6.在默認任務里加上，可以使用grunt --verbose --force命令查看文件生成細節

grunt.registerTask('default', [
    'newer:eslint',
    'test',
    'build',
    'react',
    'browserify'
  ]);

參考：
1.generator-generator
2.yeoman
3.grunt-react

項目主頁：http://www.baiduhome.net/lib/view/home/1438239916378