This build supports gulp 4.x.x
.
For gulp 3.x.x
use ~1.4.0 version.
node -v && npm -v && gulp -v
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
topackage.json
Install modules listed as dependencies in package.json
npm install
or
yarn
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
};
- If you need to configure
BrowserSync
use thedev/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]/]
};
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