PostCSS Magento 2 system
PostCSS Magento 2 system.
$ npm install -g gulp(sudo may be needed for mac users)
composer require trive/theme-frontend-striveor clone this repository under Magento /app/design/frontend/Trive/blank folder & StriveGulpTool inside Magento_root/strive-gulp folder.
yarninside strive-gulp folder
Added gulp clean and deploy tasks. If there is a need,
gulp clean will remove everything in
pub/static folder (Except .htaccess, magento blank & magento luma theme) and
gulp deploy will deploy Magento static content (short of
PostCSS plugins used on Strive (check npmjs for usage):
Gulpfile paths.cssSrc would be 'app/design/fronted/Trive/theme-name' and paths.cssDest: 'pub/static/frontend/Trive/theme-name/'. Child theme will need to have styles.css and settings.css inside the same folder structure like Strive (web/src/preCSS/), so it'll be needed to copy those two files from Trive/blank to child theme.
'postcss-import' looks for imported css files inside Trive/theme-name and if it can't find them here, it'll look into Trive/blank. To override existing blank theme css file, add css file with same name and path in child theme. postcss-import will take it instead of Trive/blank css.
File override example: Trive/blank/web/src/preCSS/theme/icons.css -> Trive/theme-name/web/src/preCSS/theme/icons.css
gulp - Default gulp task (runs 'css', 'static', 'watch' & 'browser-sync' tasks). It watches css, html, images & js files. Browser-sync injects css file into the browser. These files, if changed, are auto transferred from theme to pub/static folder, so deployment of Magento static content would not be needed. Gulp-watch package is added to gulpfile so newly added files are watched also. This means it's not needed to restart gulp task anymore.
gulp clean - Removes everything in
pub/static folder (Except .htaccess, magento blank & magento luma theme)
gulp deploy - It's a short of
bin/magento setup:static-content:deploy. There is no problem to use longer option either :)
gulp upgrade - Short of 'bin/magento setup:upgrade'
gulp deploy - Excluded Magento/blank & Mageto/luma by default. Faster deployment this way...
Working demo of Strive can be checked here: https://strive.public.trivedev.com/