README

PostCSS Magento 2 系统。

要求

已安装 Magento 2 CE
NodeJS (带有 npm 软件包管理器)
GulpJS $ npm install -g gulp (Mac 用户可能需要 sudo)

安装

通过 Composer 安装: composer require trive/theme-frontend-strive 或克隆此存储库到 Magento /app/design/frontend/Trive/blank 文件夹，并在 Magento_root/strive-gulp 文件夹内使用 StriveGulpTool。
bin/magento setup:upgrade
bin/magento setup:static-content:deploy
在 strive-gulp 文件夹内使用 npm install 或 yarn 安装 node_modules
在 gulpfile 中设置 Gulp 文件路径。

功能 & 使用

由于 PostCSS 的支持，CSS 编译速度快
PostCSS 主题回退/子主题支持
一组尽可能小的 PostCSS 基础样式和设置，以获取一个可工作的开发系统。嘿，它看起来有点像 Magento 基础主题，对吧？ ;)
BrowserSync - 将 CSS 立即注入浏览器 & weinre 支持
通过 Gulp 直接监视并传输主题静态内容到 pub/static。在开发期间无需使用 Magento 内容部署。
增加了 gulp clean 和 deploy 任务。如果需要，gulp clean 将删除 var/cache、var/generation、var/view_preprocessed & pub/static 文件夹中的所有内容（除 .htaccess、magento blank & magento luma 主题外）和 gulp deploy 将部署 Magento 静态内容（相当于 bin/magento setup:static-content:deploy）。
Strive 上使用的 PostCSS 插件（请检查 npmjs 了解使用方法）
postcss-import - 将 @import 规则转换为内联内容的 PostCSS 插件
postcss-simple-vars - 用于 Sass 风格变量的 PostCSS 插件
postcss-extend - 尽可能接近 cssnext @extend 的 PostCSS
postcss-nested - 将嵌套规则展开，类似于 Sass 的 PostCSS 插件
autoprefixer - 解析 CSS 并使用 Can I Use 网站上的值添加供应商前缀到 CSS 规则
cssnano - 建立在 PostCSS 生态系统之上的模块化压缩器
css-mqpacker - 将相同的 CSS 媒体查询规则打包成一个媒体查询规则
postcss-mixins - 用于混入的 PostCSS 插件
lost - LostGrid 是一个强大的网格系统，它是 PostCSS 内置的，适用于任何预处理器，甚至是纯 CSS
postcss-responsive-type - 向字体大小添加响应式魔法的 PostCSS 插件
postcss-custom-media - 将W3C CSS自定义媒体查询转换为更兼容的CSS的PostCSS插件
postcss-color-function - 将W3C CSS颜色函数转换为更兼容的CSS的PostCSS插件。

Gulp

创建子主题

paths.cssSrc的路径为'app/design/fronted/Trive/theme-name'，而paths.cssDest: 'pub/static/frontend/Trive/theme-name/'。子主题需要在与Strive（web/src/preCSS/）相同的文件夹结构中包含styles.css和settings.css，因此需要将这两个文件从Trive/blank复制到子主题中。

覆盖css文件

'postcss-import'会在Trive/theme-name中查找导入的css文件，如果在这里找不到，它会查找Trive/blank。要覆盖现有的空白主题css文件，请添加在子主题中具有相同名称和路径的css文件。postcss-import会使用它而不是Trive/blank css。

文件覆盖示例：Trive/blank/web/src/preCSS/theme/icons.css -> Trive/theme-name/web/src/preCSS/theme/icons.css

Gulp任务

gulp - 默认gulp任务（运行'css'、'static'、'watch' & 'browser-sync'任务）。它监视css、html、图片和js文件。Browser-sync将css文件注入浏览器。如果这些文件发生变化，它们会自动从主题传输到pub/static文件夹，因此不需要部署Magento静态内容。gulpfile中添加了Gulp-watch包，因此也会监视新添加的文件。这意味着不再需要重新启动gulp任务。
gulp clean - 从var/cache、var/generation、var/view_preprocessed & pub/static文件夹中删除所有内容（除 .htaccess、magento blank & magento luma主题外）
gulp deploy - 它是bin/magento setup:static-content:deploy的简写。也可以使用较长的选项：）

更新

gulp upgrade - 简写为'bin/magento setup:upgrade'
gulp deploy - 默认排除Magento/blank & Mageto/luma。这样部署更快...

演示

Strive的工作演示可以在此处查看：https://strive.public.trivedev.com/

trive / theme-frontend-strive

维护者

详细信息