PuppeteerでいらないCSSを消す

Transcript

1. 1.

   ͍Βͳ͍$44Λ
 1VQQFUFFSͰফ͢ !QJSPTJLJDL
    8FC
   (PPHMF
   *0
   ͷ8FCΛ·ͱΊΔձ

2. 2.

   ࣗݾ঺հ w !QJSPTJLJDL
   w αΠϘ΢ζגࣜձࣾ
 ϑϩϯτΤϯυΤΩεύʔτνʔϜ
   w طʹ͝ଘ஌ͩͱࢥ͍·͕͢ɺ
 ࡢ೔ɺ௕ঁ͕࢈·Ε·ͨ͠!

3. 3.

   ࠷ۙ΍͍ͬͯΔ࢓ࣄ w ڊେͳ$44ͷTUZMFEDPNQPOFOUTԽ
   w ສߦ͋Δ͕ɺશͯͷελΠϧ͕ඞཁͳΘ͚Ͱ͸ͳ͍
   w ͦͷଞͷ໰୊
   w NJODTTͱ͍͏֦ுࢠͳͷʹѹॖ͞Ε͍ͯͳ͍
   w

   CPPUTUSBQ΍GPOUBXFTPNFͷελΠϧΛ্ॻ͖͍ͯ͠Δ
   w ৄࡉ౓͕ߴ͗͢ΔελΠϧ͕݁ߏ͋Δ
   
   
   FUD
4. 4.

   
   Ͳ͏ઓ͑͹Α͍ͷ͔
   Θ͔ΒΜ

5. 5.

   .PEFSO
   8FC
   5FTUJOH
   BOE
   "VUPNBUJPO
   XJUI
   1VQQFUFFS
   IUUQTXXXZPVUVCFDPNXBUDI W.CO"5-$V,* 1VQQFUFFSͰ
   +4ɾ$44ͷΧόϨοδ͕
   औΕ·͢

6. 6.

   
   ͜ͷػೳΛ࢖͑͹
   ࢖ͬͯͳ͍ελΠϧΛ
   ୳͠ग़ͤΔͷͰ͸ʁ

7. 7.

   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(); … })();
8. 8.

   QVQQFUFFSUPJTUBOCVMͰ
   OZD͕ॲཧՄೳͳϑΥʔϚοτʹม׵ const pti = require('puppeteer-to-istanbul'); // .nyc_output/*を生成 pti.write(cssCoverage);

9. 9.

   )5.-ܗࣜͷϨϙʔτΛੜ੒ w OQY
   OZD
   SFQPSU
   SFQPSUFSIUNM
   w DPWFSBHFҎԼʹ)5.-Λग़ྗ
   w PQFO
   DPWFSBHFJOEFYIUNM

10. 10.

    εΫγϣషΔ

11. 11.

    
    खಈͰফ͢ͷਏͦ͏
    ΧόϨοδ͔ΒࣗಈͰ
    ফͤͳ͍͔ʁ

12. 12.

    OZD@PVUQVUͷத਎ w PVUKTPO
    w ֤ϑΝΠϧͷΧόϨοδ৘ใ
    w KT DTTKT
    w $44ϑΝΠϧͦͷ΋ͷ
    

    w ֦ுࢠ͕KTʹͳ͍ͬͯΔͷ͸Ṗ
13. 13.

    OZD@PVUQVUPVUKTPOͷ
    TϑΟʔϧυ͕࢖͑ͦ͏ // .nyc_output/out.jsonの構造 { "ファイルパス": { "path": "ファイルパス", "s":

    { "行数": 0 or 1 // 1の場合、カバレッジ有り … }, … }, … }
14. 14.

    ෆཁͳߦΛফ͢ॲཧʢΠϝʔδʣ 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)); });
15. 15.

    ݁Ռ w ΧόϨοδ͕໿͔͠ͳ͔ͬͨ
    w ສߦ
    ˠ
    ߦ
    w ·ͩଟ͍͕ΪϦΪϦઓ͑Δߦ਺ʹͳͬͨ

16. 16.

    ϋϚͬͨͱ͜Ζ

17. 17.

    QBHFHPUPͷͨͼʹ
    ΧόϨοδ͕Ϧηοτ͞ΕΔ w ҎԼͷΑ͏ʹରॲ
    w HPUPຖʹΧόϨοδΛੜ੒
    w QUPJXSJUF͸ҰͭͷΧόϨοδ͔͠ड͚෇͚ͳ͍ͷͰ
    w ෳ਺ͷΧόϨοδΛϚʔδͯ͠


    ҰͭͷΧόϨοδΛੜ੒
18. 18.

    QVQQFUFFS͕ग़ྗ͢Δ
    ΧόϨοδͷߏ଄ [ { url: "ファイルのURL", text: "ファイルの中身", ranges: [

    // カバレッジの開始位置・終了位置の配列 { start: 0, end: 100 }, … ] }, … ]
19. 19.

    ෳ਺ͷΧόϨοδΛϚʔδ { 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 } ] }
20. 20.

    ΧόϨοδ͕ൃੜ͠ͳ͍ w !NFEJBએݴɺ!GPOUGBDFએݴʹ͸
 ΧόϨοδ͕ൃੜ͠ͳ͍
    w *TTVFʹొ࿥͞Ε͍͕ͯͨόά͔࢓༷͔͸෼͔Βͳ͍
    w ҎԼͷΑ͏ʹରॲ
    w !GPOUGBDFએݴ͸ΧόϨοδ͋Γͳؔ͠ΘΒͣ࢒͢
    

    w !NFEJBએݴ಺ͷελΠϧʹΧόϨοδ͕͋Δ৔߹͸
 ࢒͢
21. 21.

    ͓ΘΓ w 1VQQFUFFS͸&&ςετҎ֎ͷ࢖͍ํ΋Ͱ͖Δʂ
    w ࠷ऴతʹ͸εΫγϣΛऔ͓͍ͬͯͯ
 ը૾ࠩ෼Λग़ͤΔΑ͏ʹͯ͠ΑΓ࣮֬ʹෆཁͳελΠϧΛ ফͤΔΑ͏ʹͨ͠

22. 22.

    ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠