README

启用 Grunt 用于编译 CSS。增加额外的控制、速度、源映射，并允许后编译任务。

!!!! 请阅读 !!!!!

除了这个模块外，每个项目还需要一个特定的 Grunt '主题' 模块来扩展它。这是为了配置项目的主题和多语言本地化（如果有），替换 en_US grunt 设置中的 Blank & Luma 主题。该模块的类型为 "magento2-component"，仅包含一个文件：grunt/grunt/configs/themes.js。

本 README 的底部提供了 themes.js & composer.json 文件的示例。

安装此模块后，应运行 npm install 以安装 Grunt 的节点模块。在项目/gunt 文件夹（与该模块的 Gruntfile.js 同级）中运行：sudo npm install。这将创建本地或服务器上的 node_modules 复制。要检查安装的节点模块是否与 package.json 列表中的匹配，请使用 ls -1 node_modules/。

使用命令 grunt refresh --force 运行所有 Grunt 任务或使用 grunt exec:en_US 或 grunt dev:en_US 运行子集。

项目仍将包含 Magento 的默认 Gruntfile.js - 应忽略此文件。如果在项目级别（即在 grunt 文件夹外）运行 grunt，则不会正常工作。

如果此模块进行了升级，且项目需要新的升级版本，则需要删除 node_modules 文件夹，在运行 composer update 后，需要再次使用 sudo npm install 重新创建它。

文件功能

Gruntfile.js

• dev 任务函数允许为特定区域设置运行 Grunt 任务 - 例如，grunt dev:en_US
• npm 任务加载 post CSS 例程：grunt.loadNpmTasks('grunt-postcss');

package.json

• Grunt 编译 CSS 表格后运行的 postcss 模块 -（2015 年 3 月 = Autoprefixer、CSSnano、RTLcss）

dev/tools/grunt/configs/less.js

• 为 pub/ 添加 sourceMapBasepath 以便生成源映射

composer.json 中项目特定 Grunt 主题模块的映射 - 替换 {PROJECT}

#!javascript

{
    "name": "{PROJECT}/module-grunt-theme",
    "description": "{PROJECT} Grunt Module",
    "license": "proprietary",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "100.0.*",
        "{PROJECT}/theme-default": "*"
    },
    "type": "magento2-component",
    "extra": {
        "map": [
            [
                "grunt/grunt/configs/themes.js",
                "grunt/grunt/configs/themes.js"
            ]
        ]
    }
}

themes.js 示例 - 这需要根据项目设置进行调整 - 也替换 {PROJECT}

#!javascript

module.exports = {
    ar_SA: {
        area: 'frontend',
        name: '{PROJECT}/arabic',
        locale: 'ar_SA',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email'
        ],
        dsl: 'less'
    },
    en_US: {
        area: 'frontend',
        name: '{PROJECT}/default',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email'
        ],
        dsl: 'less'
    }
};