README

此构建支持 gulp 4.x.x。对于 gulp 3.x.x 使用 ~1.4.0 版本。

确保已安装 Node、NPM 和 Gulp

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

项目集成

将存储库的路径添加到 composer.json

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

运行

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

将以下文件重命名为您的项目根目录下的文件

• package.json.example 到 package.json

安装 package.json 中列出的依赖模块

npm install

或

yarn

配置

确保您已配置 dev/tools/grunt/configs/local-themes.js 文件 (adobe 文档)

将 local.js.example 的内容复制到 dev/tools/gulp/configs/ 目录中的 local.js，并设置 Gulp 配置。

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

可选

• 如果您需要配置 BrowserSync，请使用 dev/tools/gulp/configs/bsConfig.js

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

• 要配置您所需的临界路径屏幕大小，请使用 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]/]
};

如何使用

在项目根目录运行 gulp [command] --[theme] --[arguments]

可用命令

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

选项

--[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

示例

删除 pub/static 和 var 目录中与主题相关的静态文件，将符号链接重新发布到 pub/static/frontend/ 目录中的源文件，并使用在 pub/static/frontend/ 目录中发布的符号链接编译 CSS 文件，使用源映射和压缩。

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

使用在 pub/static/frontend/ 目录中发布的符号链接编译 CSS 文件，带有源映射。

gulp less --luma --map

使用 livereload 监视样式（需要安装 LiveReload 浏览器扩展）

gulp watch-styles --luma --live

从 styles-l.css 和 styles-m.css 创建 critical.css 并将其放置到 app/design/frontend/<VandorName>/<ThemeName>/web/css。在 production 模式下应在运行 php bin/magento s:s:d（任务使用 pub/static/deployed_version.txt 来创建到静态文件的绝对路径）之后运行

gulp critical --luma

注意

• ES6 文件应放置在 .../web/js/src/*.js。编译后的文件将在 .../web/js/*.js