Magento 2 theme critical css Grunt task

Σε αυτό το άρθρο θα δούμε πως μπορούμε για δημιουργήσουμε ένα Grunt task για μπορούμε με μία εντολή να δημιουργήσουμε αυτόματα το critical css για το θέμα του καταστήματος μας.

Το παρακάτω άρθρο προϋποθέτει ότι έχετε εγκαταστήσει το Node.js, το Grunt στο τοπικό σας περιβάλλον ανάπτυξης. Επίσης θα πρέπει να τρέξετε την εντολή npm install στον κεντρικό (root) φάκελο της Magento 2 εγκατάστασης σας. Θα αναλύσουμε σε μελλοντικό άρθρο πως να στήσουμε το τοπικό περιβάλλον για ανάπτυξη θέματος (theme development) Magento 2 και να δημιουργήσουμε το δικός μας Magento 2 θέμα.

Μέσα στο κεντρικό (root) φάκελο του Magento 2 τρέξτε την παρακάτω εντολή

npm install grunt-critical --save-dev

για να εγκαταστήσετε το grunt-critical πακέτο που θα χρειαστούμε για να δημιουργήσουμε το Grunt task για την αυτόματη παραγωγή του critical css.

Δημιουργήστε το αρχείο critical.js στην τοποθεσία {Magento root}/dev/tools/grunt/configs/ με το παρακάτω περιεχόμενο για να ορίσουμε τις ρυθμίσεις για το grunt-critical

'use strict';

var combo   = require('./combo'),
    themes = require('../tools/files-router').get('themes'),
    path    = require('./path'),
    _       = require('underscore');

var themeOptions = {};

_.each(themes, function(theme, name) {
    themeOptions[name] = {
        options: {
            width: 1024,
            height: 700,
            minify: true
        },
        src: 'http://example.com/',
        dest: 'app/design/' + theme.area +'/'+ theme.name +'/web/css/critical.css',
    };
});

module.exports = themeOptions;

Έχουμε ορίσει τα κυριότερα options για το grunt-critical, μπορείτε να βρείτε αναλυτικά όλες τις ρυθμίσεις που μπορείτε να χρησιμοποιήσετε εδώ.

Δημιουργήστε το αρχείο critical.js στην τοποθεσία {Magento root}/dev/tools/grunt/tasks/ με το παρακάτω περιεχόμενο για να δηλώσουμε το καινούριο μας Grunt task με το όνομα critical

module.exports = function (grunt) {
    'use strict';
    grunt.loadNpmTasks('grunt-critical');
};

Έπειτα μπορούμε να τρέξουμε το task μας με την εντολή

grunt critical themeName

για να παράγουμε το critical.css αρχείο για το θέμα μας.

Για να χρησιμοποιήσει το Magento 2 το critical.css αρχείο που δημιουργήσαμε θα πρέπει να πάμε στο backend από το κεντρικό μενού στα αριστερά

Stores > Settings > Configuration > ADVANCED > Developer

και να ενεργοποιήσουμε την επιλογή Use Critical CSS κάτω από το CSS section ή να τρέξουμε την εντολή

bin/magento config:set dev/css/use_css_critical_path 1

σε περίπτωση που έχουμε το κατάστημα σε production mode και το Developer μενού δεν φαίνεται. Περισσότερες πληροφορίες για το critical css και το Magento 2 μπορείτε να βρείτε εδώ.

Σημείωση! Για χρησιμοποιήσει το Magento 2 το critical css θα πρέπει να έχετε έκδοση 2.3.3 ή μεταγενέστερη.