Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/subodha/magento-2-gulp

Gulp for Magento 2
https://github.com/subodha/magento-2-gulp

Last synced: 27 days ago
JSON representation

Gulp for Magento 2

Awesome Lists containing this project

README 

        
# Magento 2 Gulp Integration



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



GulpGrunt

Compilation of all themes (10 files):16sec33sec

Custom theme compilation (2 files)4.5s11.2s



## Installation



### Method 1: Install using composer (only for Magento >= 2.2.2)



1. Ensure Node is used in Version 11: `nvm install v11`



2. Add the composer repository `composer config repositories.gulp vcs https://github.com/subodha/magento-2-gulp.git`



3. Install the module `composer require subodha/magento-2-gulp:"1.*"`



4. Add these scripts to your composer.json:



```json

{

    "scripts": {

        "post-update-cmd": [

            "cd vendor/subodha/magento-2-gulp && npm install"

        ],

        "post-install-cmd": [

            "cd vendor/subodha/magento-2-gulp && npm install"

        ]

    }

}

```



5. Run `composer install`



6. Define your theme configuration in `dev/tools/grunt/configs/themes.js`



7. You can now run `vendor/bin/gulpm2 build --your_theme` to compile your styles



### Method 2: Copying to your Magento installation (old method for Magento <= 2.2.1)



1. Download as a zip file or clone this repository.



2. Copy "gulpfile.js" and "package.json" in to the root directory (code pool).



   If you are using Magento 2.2.1 or lower comment line number 47 - 48.



3. Install node.js for your OS: https://nodejs.org/en/



4. Install gulp globally using `npm install -g gulp-cli`



5. Install modules: run a command in a root directory of your project "npm install".



   (If you already installed Grunt please remove node_module directory)



## How to run



1. Run `gulp exec --theme` ex: `gulp exec --luma`

   
Or:  `php bin/magento dev:source-theme:deploy --locale="en_AU" --area="frontend" 
--theme="

   VendorName/themeName"`



2. Run : `gulp deploy --theme` ex: `gulp deploy --luma`

   
Or: `php bin/magento setup:static-content:deploy en_AU`



3. 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`



4. For using liveReload install extension for your browser: https://livereload.com/

   
4.a. Turn on the extension on the page of project.



5. For clear the magento cache: `gulp cache-flush`

6. 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`.