Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PuppeteerでいらないCSSを消す
Hiroyuki ANAI
June 19, 2019
Programming
24
25k
PuppeteerでいらないCSSを消す
@pirosikick の発表資料です。
https://mentaico-js.connpass.com/event/132416/
Hiroyuki ANAI
June 19, 2019
Tweet
Share
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
160
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
190
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
5
15k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.4k
Web Share Target API #w3fukuoka
pirosikick
0
470
Google I/O '19のWebをまとめる会
pirosikick
2
670
Progressive Hydration #react_fukuoka
pirosikick
5
1.2k
WebFEのテストにおける気持ちの変遷
pirosikick
0
320
私が考えるReactのよさ #fukuokajs
pirosikick
2
610
Other Decks in Programming
See All in Programming
%q is for Quine
koic
0
400
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
130
Swift Observation
shiz
3
250
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
380
Use KMM to call the API of the National Tax Agency
akkeylab
0
290
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.1k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
440
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
700
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Featured
See All Featured
KATA
mclloyd
12
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
Visualization
eitanlees
128
12k
Optimizing for Happiness
mojombo
365
64k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Code Reviewing Like a Champion
maltzj
508
38k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
The Invisible Side of Design
smashingmag
292
48k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Design by the Numbers
sachag
271
18k
Transcript
͍Βͳ͍$44Λ 1VQQFUFFSͰফ͢ !QJSPTJLJDL 8FC (PPHMF*0ͷ8FCΛ·ͱΊΔձ
ࣗݾհ w !QJSPTJLJDL w αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ w طʹ͝ଘͩͱࢥ͍·͕͢ɺ ࡢɺঁ͕࢈·Ε·ͨ͠!
࠷͍ۙͬͯΔࣄ w ڊେͳ$44ͷTUZMFEDPNQPOFOUTԽ w ສߦ͋Δ͕ɺશͯͷελΠϧ͕ඞཁͳΘ͚Ͱͳ͍ w ͦͷଞͷ w NJODTTͱ͍͏֦ுࢠͳͷʹѹॖ͞Ε͍ͯͳ͍ w
CPPUTUSBQGPOUBXFTPNFͷελΠϧΛ্ॻ͖͍ͯ͠Δ w ৄࡉ͕ߴ͗͢ΔελΠϧ͕݁ߏ͋ΔFUD
Ͳ͏ઓ͑Α͍ͷ͔ Θ͔ΒΜ
.PEFSO8FC5FTUJOHBOE"VUPNBUJPOXJUI1VQQFUFFS IUUQTXXXZPVUVCFDPNXBUDI W.CO"5-$V,* 1VQQFUFFSͰ +4ɾ$44ͷΧόϨοδ͕ औΕ·͢
͜ͷػೳΛ͑ ͬͯͳ͍ελΠϧΛ ୳͠ग़ͤΔͷͰʁ
1VQQFUFFSͰ $44ͷΧόϨοδΛऔಘ const puppeteer = require('puppeteer'); (async () => {
// ブラウザの起動 const browser = await puppeteer.launch(); const page = await browser.newPage(); // カバレッジの収集を開始 await page.coverage.startCSSCoverage(); // カバジッジを取りたいページを徘徊 await page.goto(…); … // カバレッジの収集を終了 const cssCoverage = await page.coverage.stopCSSCoverage(); … })();
QVQQFUFFSUPJTUBOCVMͰ OZD͕ॲཧՄೳͳϑΥʔϚοτʹม const pti = require('puppeteer-to-istanbul'); // .nyc_output/*を生成 pti.write(cssCoverage);
)5.-ܗࣜͷϨϙʔτΛੜ w OQYOZDSFQPSUSFQPSUFSIUNM w DPWFSBHFҎԼʹ)5.-Λग़ྗ w PQFODPWFSBHFJOEFYIUNM
εΫγϣషΔ
खಈͰফ͢ͷਏͦ͏ ΧόϨοδ͔ΒࣗಈͰ ফͤͳ͍͔ʁ
[email protected]
ͷத w PVUKTPO w ֤ϑΝΠϧͷΧόϨοδใ w KT DTTKT w $44ϑΝΠϧͦͷͷ
w ֦ுࢠ͕KTʹͳ͍ͬͯΔͷṖ
[email protected]
PVUKTPOͷ TϑΟʔϧυ͕͑ͦ͏ // .nyc_output/out.jsonの構造 { "ファイルパス": { "path": "ファイルパス", "s":
{ "行数": 0 or 1 // 1の場合、カバレッジ有り … }, … }, … }
ෆཁͳߦΛফ͢ॲཧʢΠϝʔδʣ const fs = require('fs'); const readline = require('readline'); //
out.jsonのsフィールドから不要な行を消す処理のイメージ const removeUnusedLines = (filePath, s) => new Promise(resolve => { const reader = readline.createInterface({ input: fs.createReadStream(filePath) }); let currentLine = 0; const lines = []; // ファイルから1行ずつ読む reader.on('line', line => { // カバレッジがある行を残す if (s[currentLine++]) { lines.push(line); } }); reader.on('close', () => resolve(lines)); });
݁Ռ w ΧόϨοδ͕͔͠ͳ͔ͬͨ w ສߦˠߦ w ·ͩଟ͍͕ΪϦΪϦઓ͑Δߦʹͳͬͨ
ϋϚͬͨͱ͜Ζ
QBHFHPUPͷͨͼʹ ΧόϨοδ͕Ϧηοτ͞ΕΔ w ҎԼͷΑ͏ʹରॲ w HPUPຖʹΧόϨοδΛੜ w QUPJXSJUFҰͭͷΧόϨοδ͔͠ड͚͚ͳ͍ͷͰ w ෳͷΧόϨοδΛϚʔδͯ͠
ҰͭͷΧόϨοδΛੜ
QVQQFUFFS͕ग़ྗ͢Δ ΧόϨοδͷߏ [ { url: "ファイルのURL", text: "ファイルの中身", ranges: [
// カバレッジの開始位置・終了位置の配列 { start: 0, end: 100 }, … ] }, … ]
ෳͷΧόϨοδΛϚʔδ { url: "ファイルA", text: "…", ranges: [ { start:
0, end: 100 }, { start: 201, end: 300 } ] } { url: "ファイルA", text: "…", ranges: [ { start: 101, end: 200 }, { start: 250, end: 350 } ] } ΧόϨοδͦͷ ΧόϨοδͦͷ { url: "ファイルA", text: "…", ranges: [ { start: 0, end: 100 }, { start: 101, end: 200 }, { start: 201, end: 350 } ] }
ΧόϨοδ͕ൃੜ͠ͳ͍ w !NFEJBએݴɺ!GPOUGBDFએݴʹ ΧόϨοδ͕ൃੜ͠ͳ͍ w *TTVFʹొ͞Ε͍͕ͯͨόά͔༷͔͔Βͳ͍ w ҎԼͷΑ͏ʹରॲ w !GPOUGBDFએݴΧόϨοδ͋Γͳؔ͠ΘΒͣ͢
w !NFEJBએݴͷελΠϧʹΧόϨοδ͕͋Δ߹ ͢
͓ΘΓ w 1VQQFUFFS&&ςετҎ֎ͷ͍ํͰ͖Δʂ w ࠷ऴతʹεΫγϣΛऔ͓͍ͬͯͯ ը૾ࠩΛग़ͤΔΑ͏ʹͯ͠ΑΓ࣮֬ʹෆཁͳελΠϧΛ ফͤΔΑ͏ʹͨ͠
͋Γ͕ͱ͏ ͍͟͝·ͨ͠