Getting Started

This build supports gulp 4.x.x. For gulp 3.x.x use ~1.4.0 version.

Be sure that Node, NPM and Gulp are installed

node -v && npm -v && gulp -v

Project integration

Add repository's path to the composer.json

"repositories": [
    {
        "type": "github",
        "url": "https://github.com/bobmotor/magento-2-gulp"
    }
],

Run

composer require --dev bobmotor/magento-2-gulp

Rename the following files in your project root directory

• package.json.example to package.json

Install modules listed as dependencies in package.json

npm install

or

yarn

Configuration

Make sure that you configure dev/tools/grunt/configs/local-themes.js file (adobe docs)

Copy the contents of local.js.example into local.js in the dev/tools/gulp/configs/ directory and setup Gulp configuration.

module.exports = {
    hostname: 'hostname',
    generic: 'loc',
    useHttps: false,
    useInDocker: false
};

Optionally

• If you need to configure BrowserSync use the dev/tools/gulp/configs/bsConfig.js

module.exports = {
    proxy: `${ptotocol}://${localConfig.hostname}.${localConfig.generic}/`,
    host: `${localConfig.hostname}.${localConfig.generic}`,
    tunnel: `${localConfig.hostname}`,
    open: false
};

• To configure your desired screen size for the critical path use the dev/tools/gulp/configs/criticalConfig.js

module.exports = {
    out: 'critical.css',
    url: `${ptotocol}://${localConfig.hostname}.${localConfig.generic}/`,
    width: 1920,
    height: 200,
    forceExclude: [/\[data-role=main-css-loader]/]
};

How to use

In project root dir run gulp [command] --[theme] --[arguments]

Avaliable commands:

babel                           Compile ES6+ to ES5
clean                           Remove cached files (pub/static/*, var/*)
critical                        Compile critical css
default, help                   Display this help message
exec                            Republishes symlinks to the source files
less                            Compile LESS to CSS
watch-scripts                   Watch for src/*.js files
watch-styles                    Watch for *.less files

Options:

--[package]                     Package name (optional field). Need to be the first option. Ex.: --blank
--min                           Minify css files
--map                           Add maping to CSS files
--live                          Enable livereload
--bs                            Enable browsersync

Examples:

Removes the theme related static files in the pub/static and var directories, republishes symlinks to the source files to the pub/static/frontend/ directory and compiles CSS files using the symlinks published in the pub/static/frontend/ directory with source map and minification.

gulp clean --luma && gulp exec --luma && gulp less --luma --map --min

Compiles CSS files using the symlinks published in the pub/static/frontend/ directory with source map.

gulp less --luma --map

Watch styles with livereload (LiveReload browser extension should be installed)

gulp watch-styles --luma --live

Creates critical.css from styles-l.css and styles-m.css and put it to app/design/frontend/<VandorName>/<ThemeName>/web/css. In production mode should be run after php bin/magento s:s:d (task uses pub/static/deployed_version.txt to create absolute path to the static files)

gulp critical --luma

Note:

• ES6 files should be placed at .../web/js/src/*.js. Compiled files will be in the .../web/js/*.js