一歩一歩JavaScriptフレームを構築する——初期化項目

3942 ワード

grunt javascript

最初からMVを書くつもりです.簡単なデモまで何日間かかりました.多くのコードはコピー/改造されましたが、It Worksです.今彼はlettuceといいます.コードです.https://github.com/phodal/lettuce興味があれば、私たちに参加してもいいです.
jsはまだexpertではないですが、始まりました.
一歩ずつJavaScriptの枠組みを構築する
JavaScriptプロジェクト名
最初に私が作った3回のcomitsは:

* e4e6e04 - Add README.md (3 weeks ago) 
* 37411d7 - publish bower (3 weeks ago) 
* aabf278 - init project (3 weeks ago)

はい、最初は何もしていませんでした.bowerとnpmからlettuceというライブラリを登録しました.

{
  "name": "lettuce",
  "version": "0.0.2",
  "authors": [
    "Fengda HUANG "
  ],
  "description": "A Mobile JavaScript Framework",
  "main": "index.js",
  "moduleType": [
    "amd",
    "node"
  ],
  "keywords": [
    "lettuce",
    "mobile"
  ],
  "license": "MIT",
  "homepage": "http://lettuce.phodal.com",
  "private": false,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

そして、コードを書き始めていない時にはバージョンはすでに0.0.2です.このスピードはとても速いです.まとめは以下の通りです

良い名前を取ってください.

npmとbowerの上に穴を掘って自分に

をあげます.

からREADME.md

を書き始めます.
だから私のREADME.mdはこのようです.

#Lettuce

> A is Mobile JavaScript Framework

Coming soon

はい、私たちのコードはもうComing soonになりました.
Javascriptプロジェクトのフレームを生成する
この苦痛な過程を簡略化するために、私達はやはりyeomanを使います.
Yeoman libジェネレータのインストール
1.yeomanを取り付ける

npm install -g yo

2.ゲナート-libの取り付け

 npm install -g generator-lib

3.作成項目

 mkdir ~/lettuce && cd $_
 yo lib

そして迎えました.

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

[?] What do you want to call your lib? Lettuce
[?] Describe your lib: A Framework for Romantic
[?] What is your GitHub username? phodal
[?] What is your full name? Fengda Huang
[?] What year for the copyright? 2015

百字を省くと目次にあります.

.
|____.editorconfig
|____.gitattributes
|____.gitignore
|____.jshintrc
|____bower.json
|____demo
| |____assets
| | |____main.css
| | |____normalize.css
| |____index.html
|____dist
| |____Lettuce.js
| |____Lettuce.min.js
|____docs
| |____MAIN.md
|____Gruntfile.js
|____index.html
|____LICENSE.txt
|____package.json
|____README.md
|____src
| |_____intro.js
| |_____outro.js
| |____main.js
|____test
| |____all.html
| |____all.js
| |____lib
| | |____qunit.css
| | |____qunit.js

こんなに多くの書類.
Build Java Scriptプロジェクト
そこで私達は実行しました.

grunt

こんなにたくさんのロゴがあります.

Running "concat:dist" (concat) task
File "dist/Lettuce.js" created.

Running "jshint:files" (jshint) task
>> 1 file lint free.

Running "qunit:files" (qunit) task
Testing test/all.html .OK
>> 1 assertions passed (20ms)

Running "uglify:dist" (uglify) task
File "dist/Lettuce.min.js" created.

Done, without errors.

私達のLettuce.jsの中に何がありますか?

(function(root, undefined) {
  "use strict";
/* Lettuce main */
// Base function.
var Lettuce = function() {
  // Add functionality here.
  return true;
};
// Version.
Lettuce.VERSION = '0.0.1';
// Export to the root, which is probably `window`.
root.Lettuce = Lettuce;
}(this));

私たちのライブラリはすぐに実行する関数式に書いてあります.これはjQueryなどの倉庫と同じです.
grunt内のタスクは以下の通りです.

jshintコードチェック

contactはjsを合併して1つのファイル

に着きます.

minify js圧縮js

qunitユニット試験

これで簡単に出発できます.

Json簡易文法