Σε αυτό το άρθρο θα δούμε πως μπορούμε για δημιουργήσουμε ένα 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 ή μεταγενέστερη.