Skip to content

Error in minify-output task #17

@swardana

Description

@swardana

Hi,
Executing task npm run build:prod give me error:

(node:21800) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[09:38:48] 'minifyHtml' errored after 36 ms
[09:38:48] Error in plugin "gulp-htmlmin"
Message:
    Parse Error: <meta name="theme-color" content="#000000"

    <!-- Open graph -->
    <meta property="og:title" content="Page not found">
    <meta property="og:description" content="404 Page not found">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://your-production.url/assets/img/root/404.jpg"/>
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="675" />
    <!-- Twitter -->
    <meta name="twitter:title" content="Page not found">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@yourUsername">
    <meta name="twitter:description" content="404 Page not found">
    <meta name="twitter:image" content="https://your-production.url/assets/img/root/404.jpg">
    <meta name="twitter:creator" content="@yourUsername">

    

    
    <script async 
      src="https://www.googletagmanager.com/gtag/js?id=your_tracking_id">
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'your_tracking_id');
    </script>

    
    
      <meta name="robots" content="noindex"/>
    

    
  
  
  
  

  <style>
    
    h1 {
  background: red;
}

body {
  background-color: white;
  color: black;
  transition: background-color 300ms ease-in-out 0s;
}

body.dark-mode {
  background-color: black;
  color: white;
}

.dark-mode a {
  color: lightblue;
}

.dark-mode img {
  filter: grayscale(30%);
}
  
  </style>

    
  
  
  
  

  <style>
    
    
  
  </style>


  </head>
  <body>
    <img id="color-scheme-toggle" width="36px"
      src="https://your-production.url/assets/img/icons/dark.svg" alt="toggle dark mode" />
    <h1>Page not found</h1>
    

Page not found. Go home!
    
  
  

  

  <script>
    
    {
  const h1 = document.querySelector('h1');
  h1.innerText = h1.innerText + ' | Surprise!';
}

{
  const bodyEl = document.querySelector('body');
  const toggleEl = document.querySelector('#color-scheme-toggle');
  const prismEl = document.querySelector('#prism-css');
  const DARK = 'dark';
  const LIGHT = 'light';
  const COLOR_SCHEME_CHANGED = 'colorSchemeChanged';

  toggleEl.addEventListener('click', () => {
    const isDark = bodyEl.classList.toggle('dark-mode');
    const mode = isDark ? DARK : LIGHT;
    sessionStorage.setItem('jec.color-scheme', mode);

    if (isDark) {
      toggleEl.src = toggleEl.src.replace(DARK, LIGHT);
      toggleEl.alt = toggleEl.alt.replace(DARK, LIGHT);
      if (prismEl) prismEl.href = prismEl.href.replace(LIGHT, DARK);
    } else {
      toggleEl.src = toggleEl.src.replace(LIGHT, DARK);
      toggleEl.alt = toggleEl.alt.replace(LIGHT, DARK);
      if (prismEl) prismEl.href = prismEl.href.replace(DARK, LIGHT);
    }

    toggleEl.dispatchEvent(new CustomEvent(
      COLOR_SCHEME_CHANGED, { detail: mode }
    ));
  });
}

{
  function init() {
    const DARK = 'dark';
    const LIGHT = 'light';
    const isSystemDarkMode =
      matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;

    let mode = sessionStorage.getItem('jec.color-scheme');

    if (!mode && isSystemDarkMode) {
      mode = DARK;
    } else {
      mode = mode || LIGHT;
    }

    if (mode === DARK) {
      document.querySelector('#color-scheme-toggle').click();
    }
  }

  // run the code
  init();
}

  
  </script>

    
  
  

  

  <script>
    
    
  
  </script>

  </body>
</html>
Details:
    fileName: /Users/swardana/workspace/junk/jec-11ty-starter/dist/404.html
    domainEmitter: [object Object]
    domainThrown: false

[09:38:48] 'default' errored after 38 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jec-11ty-starter@ minify-output: `npx gulp -f tasks/minify-output.gulp.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the jec-11ty-starter@ minify-output script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/swardana/.npm/_logs/2021-02-14T02_38_48_651Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jec-11ty-starter@ postbuild:prod: `npm run minify-output`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the jec-11ty-starter@ postbuild:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/swardana/.npm/_logs/2021-02-14T02_38_48_675Z-debug.log

Step to reproduce:

  • Clone the repo.
  • Run npm install
  • Run npm build:prod.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions