Сравните CSS файлов и выведите не дубликаты в новый

Question

Вот что я делаю и что я хотел бы реализовать.

На самом деле я делаю следующее:

• Скомпилируйте файлы css в основной файл. css (используется в шаблоне dev и prod)
• Использование npm penthouse для создания критического файла. css (включить в шаблон prod)

Что Я хочу реализовать:

• Сравнение основного. css и критического. css, чтобы получить дубликат css правил
• Вывод основного. css минус дубликат css правил в некритическом файле. css (для загрузки в шаблоне продукта)

Я видел много npm модулей, которые могут сравнивать такие файлы, как purge css, css -purge, et c ... Но когда наступает время для создания некритического файла. css, я врезаюсь в стену.

Если кто-то уже сделал что-то подобное или знает о решение сделать это, я все уши.

Я не запускаю модуль, как grunt или gulp, и делаю это только через скрипт npm в моем пакете. json file.

пакет. json

* 102 8 *

crit.config. js

let penthouse = require('penthouse');
let fs = require('fs');

penthouse({
  url: 'http://interface/app_dev.php/',       // can also use file:/// protocol for local files
  css: 'build/concat.css',                    // path to original css file on disk

  // OPTIONAL params
  width                  : 1900,              // viewport width
  height                 : 1000,              // viewport height
  keepLargerMediaQueries : false,             // when true, will not filter out larger media queries
  forceInclude           : [                  // selectors to keep
    '.keepMeEvenIfNotSeenInDom',
    /^\.regexWorksToo/
  ],
  propertiesToRemove     : [
    '(.*)transition(.*)',
    'cursor',
    'pointer-events',
    '(-webkit-)?tap-highlight-color',
    '(.*)user-select'
  ],
  timeout                : 30000,                 // ms; abort critical CSS generation after this timeout
  pageLoadSkipTimeout    : 0,                     // ms; stop waiting for page load after this timeout (for sites with broken page load event timings)
  strict                 : false,                 // set to true to throw on CSS errors (will run faster if no errors)
  maxEmbeddedBase64Length: 1000,                  // characters; strip out inline base64 encoded resources larger than this
  userAgent              : 'Penthouse Critical Path CSS Generator', // specify which user agent string when loading the page
  renderWaitTime         : 1000,                  // ms; render wait timeout before CSS processing starts (default: 100)
  blockJSRequests        : false,                 // set to false to load (external) JS (default: true)
  customPageHeaders      : {
    'Accept-Encoding': 'identity' // add if getting compression errors like 'Data corrupted'
  },
  screenshots            : {
    // turned off by default
    // basePath: 'build/critical', // absolute or relative; excluding file extension
    // type    : 'jpeg', // jpeg or png, png default
    // quality : 60 // only applies for jpeg type
    // -> these settings will produce homepage-before.jpg and homepage-after.jpg
  },
  puppeteer              : {
    getBrowser: undefined,        // A function that resolves with a puppeteer browser to use instead of launching a new browser session
  }
})
.then(criticalCss => {
  fs.writeFileSync('build/critical.css', criticalCss);
})
.catch(err => {
  console.log(err);
})