Download to read offline
![{
"/user/sinsoku/app/path/application.css": [
null, 1, 1, 1, null, 0, 0, 0
]
}
coverage/css-coverage.json
null => disabled, 0 => uncoverd, 1 => coverd](https://image.slidesharecdn.com/csspub-160206102121/85/CSS-8-320.jpg)
Uploaded bysinsoku listy
CSSのカバレッジツール
第13回【フリースタイル】PORTもくもく会【学生歓迎！】 http://freestyle-mokumoku.connpass.com/event/25617/
CSSのカバレッジツール
- 1.
- 2. 自己紹介 ● HN: 神速(@sinsoku_listy) ●株式会社grooves ● Railsを使う程度の能力 ● 技術的なもの ↓
- 3. 話すこと ● ツールの宣伝 ● npmパッケージの作り方 ● 便利なツール, サービスの紹介
- 4.
- 5.
- 6. これは何か？ CSSのカバレッジを計測します - 使用頻度が多い =>気をつけよう - 使用されていない =>消す！！！ ができるようになります。
- 7. 使い方 $ npm install-g clairvoyance $ clairvoyance --css path/application.css --html path/index.html
- 8. { "/user/sinsoku/app/path/application.css": [ null, 1,1, 1, null, 0, 0, 0 ] } coverage/css-coverage.json null => disabled, 0 => uncoverd, 1 => coverd
- 9. HTMLレポート --reporter のオプションでJSON以外でも出力でき ます。 $ npminstall -g clairvoyance-html $ clairvoyance --css path/application.css --html path/index.html --reporter clairvoyance-html
- 12. ToDo ● clairvoyance ○ リモートファイル対応 ○例外処理の対応 ● clairvoyance-html ○ HTMLレポートのデザイン修正
- 13. ToDo ● clairvoyance ○ リモートファイル対応 ○例外処理の対応 ● clairvoyance-html ○ HTMLレポートのデザイン修正 => 気になる人は GitHub で Watch と Star を！
- 14.
- 15. npmパッケージの作り方 $ mkdir port-mokumoku $cd port-mokumoku $ npm init これでパッケージの雛形ができます
- 16. index.js を作る function port(){ console.log('Hello, port-mokumoku'); } module.exports = port;
- 17. こんな感じのパッケージになる var moku =require('port-mokumoku'); moku() //=> Hello, port-mokumoku
- 18. 公開方法 $ npm publish npmのアカウントを作成しておけば、これだけで OK。 ※ GitHub のタグは自動で作成されない。
- 19. 便利なツール、サービス ● サービス ○ TravisCI ○ Codecov ○ Inch CI ● ツール ○ ESLint
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. ESLint ● JavaScript の静的解析ツール ○セミコロンが無い ○ 未定義の変数が使われている ○ === じゃなくて == を使っている などを指摘してくれる
- 27.