Giter Club home page Giter Club logo

Comments (4)

mikeebee avatar mikeebee commented on June 10, 2024

This addition would be fantastic.

Hey @schellenbergk, does your build task quit ok and show the ✨ Done in Xs message once it's finished? Mine doesn't unless I remove...

const critical = require('critical');

...from my task-config.js file (which I obviously need!), while all the tasks run as expected, once I see the message Finished 'build' after 11 s the task doesn't quit and I have to manually CTRL + C and I've no idea why.

I see this issue even without your suggested additions to the main package. Any ideas?

from blendid.

schellenbergk avatar schellenbergk commented on June 10, 2024

Hi @mikeebee , Yes mine does exit with Done in Xs. Remember for this to work you would need to modify productionTask and move postbuild after 'replaceFiles' task. However, unless this feature gets implemented I've made a workaround outside of Blendid:

Create a file criticalCss.js with:

const critical = require('critical');
const fs = require('file-system');
const path = require('path');
const loadJsonFile = require('load-json-file');

const projectDestPath = path.resolve(process.env.PWD, 'public/');
const revManifestPath = path.resolve(projectDestPath, 'rev-manifest.json');

console.log('Critical CSS...');
fs.copyFile('public/index.html', 'public/index-uncritical.html', {
  done: function (err) {
    loadJsonFile(revManifestPath).then(json => {
      critical.generate({
        base: projectDestPath,
        src: 'index.html',
        width: 1300,
        height: 900,
        inline: true,
        target: {
          html: path.resolve(projectDestPath, 'index.html'),
          uncritical: path.resolve(projectDestPath, json['css/app.css'].replace('.css', '-uncritical.css'))
        },
        minify: true,
        extract: true,
      });
      console.log("Complete!");
    });
  }
});

Then modify your package.json and update build script to:

"scripts": {
    "start": "yarn run blendid",
    "build": "yarn run blendid build && node criticalCss.js",
    ...

from blendid.

mikeebee avatar mikeebee commented on June 10, 2024

Hi @schellenbergk, ah yes this works perfectly!

I wish I knew why the task won't quit when I'm using additionalTasks with critical. For my purposes, running a task on production.postbuild would be fine. I'll stick with your implementation for the time being, it's a better solution anyway, I just hate not knowing what the issue is.

Thanks again for your help, I would have been stuck otherwise!

from blendid.

schellenbergk avatar schellenbergk commented on June 10, 2024

I'm glad I could help :)

from blendid.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.