CSSのカバレッジツール
1 like1,640 views
第13回【フリースタイル】PORTもくもく会【学生歓迎！】 http://freestyle-mokumoku.connpass.com/event/25617/
![{
"/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)
CSSのカバレッジツール
- 2. 自己紹介 ● HN: 神速(@sinsoku_listy) ● 株式会社grooves ● Railsを使う程度の能力 ● 技術的なもの ↓
- 3. 話すこと ● ツールの宣伝 ● npm パッケージの作り方 ● 便利なツール, サービスの紹介
- 4. ツールの宣伝
- 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以外でも出力でき ます。 $ npm install -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. 便利なツール、サービス ● サービス ○ Travis CI ○ Codecov ○ Inch CI ● ツール ○ ESLint
- 20. Travis CI
- 21. Codecov
- 22. Inch CI
- 23. 各サービスの画面紹介（デモ）
- 24. ESLint
- 25. ESLint ● JavaScript の静的解析ツール ○ セミコロンが無い ○ 未定義の変数が使われている ○ === じゃなくて == を使っている などを指摘してくれる