As a Magento 2 frontend developer you might have noticed that less to css compilation process is slow with grunt and it
takes more time to rebuild everything making you an inefficient developer.
However, you could solve this problem with Gulp. Gulp is a task / build runner which uses Node.js for web development.
The main difference between Gulp and Grunt lies in how they deal with their automation tasks inside.
Gulp uses Node Stream while Grunt uses temp files. Therefore, Gulp compilation is faster compared to Grunt.
Comparing with Grunt
Gulp
Grunt
Compilation of all themes (10 files):
16sec
33sec
Custom theme compilation (2 files)
4.5s
11.2s
Installation
Method 1: Install using composer (only for Magento >= 2.2.2)
Ensure Node is used in Version 11: nvm install v11
Add the composer repository composer config repositories.gulp vcs https://github.com/subodha/magento-2-gulp.git
Install the module composer require subodha/magento-2-gulp:"1.*"
Run gulp command in the root directory with arguments or without. Examples:
3.a. Compilation of all themes: gulp
3.b. Compilation of certain theme: gulp less --luma
3.c. Watcher of certain theme: gulp watch --luma
3.d. Compilation of certain theme with minification (+~2.5s): gulp less --luma --min
3.e. Compilation of certain theme with sourcemap(+~1.5s), can't be used with
minification: gulp less --luma --map
3.f. Compilation with live reload: gulp less --luma --live
3.g. Watcher with liveReload: gulp watch --luma --live
3.h. For clear the magento cache: gulp cache-flush
For using liveReload install extension for your browser: https://livereload.com/ 4.a. Turn on the extension on the page of project.
For clear the magento cache: gulp cache-flush
For clear the magento static files cache: gulp clean --luma
How to run (with composer integration)
See above, but replace gulp with vendor/bin/gulpm2.
请发表评论