Skip to content
Magento CE Theme 2.2.7 Gulp Sass
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
app
bin
dev
generated
lib
phpserver
pub
setup
var
vendor
.gitignore
.htaccess
.php_cs.dist
.travis.yml
.user.ini
CHANGELOG.md
COPYING.txt
LICENSE
LICENSE.txt
LICENSE_AFL.txt
README.md
auth.json
composer.json
composer.lock
index.php
nginx.conf
php.ini

README.md

Magento 2 Gulp Sass

Set of front-end tools for Magento 2, based on Gulp.js

themes.json structure

Check config/themes.json.sample to get samples.

  • src - full path to theme
  • dest - full path to pub/static/[theme_area]/[theme_vendor]/[theme_name]
  • locale - array of available locales
  • parent - name of parent theme
  • stylesDir - (default styles) path to styles directory. For theme-blank-sass it's styles. By default Magento 2 use web/css.
  • disableSuffix - disable adding .min suffix using --prod flag.
  • postcss - (deafult ["plugins.autoprefixer()"]) PostCSS plugins config. Have to be an array.
  • modules - list of modules witch you want to map inside your theme
  • ignore - array of ignore patterns

watcher.json structure

Check config/watcher.json.sample to get samples.

  • usePolling - set this to true to successfully watch files over a network (i.e. Docker or Vagrant) or when your watcher dosen't work well. Warining, enabling this option may lead to high CPU utilization! chokidar docs

Tasks list

  • babel - Run Babel, a compiler for writing next generation JavaScript.
    • --theme name - Process single theme.
    • --prod - Production output - minifies and uglyfy code.
  • clean - Removes /pub/static directory content.
  • csslint - Run stylelint based tests.
    • --theme name - Process single theme.
    • --ci - Enable throwing errors. Useful in CI/CD pipelines.
  • default - type gulp to see this readme in console.
  • dev - Runs browserSync and inheritance, babel, styles, watch tasks.
    • --theme name - Process single theme.
    • --disableLinting - Disable SASS and CSS linting.
    • --disableMaps - Toggles source maps generation.
  • eslint - Watch and run eslint on specified JS file.
    • --file fileName - You have to specify what file you want to lint, fileName without .js.
  • inheritance - Create necessary symlinks to resolve theme styles inheritance and make the base for styles processing. You have to run in before styles compilation and after adding new files.
  • sasslint - Run sass-lint based tests.
    • --theme name - Process single theme.
    • --ci - Enable throwing errors. Useful in CI/CD pipelines.
  • setup - Creates a convenient symlink from /tools to /vendor/snowdog/frontools and copies all sample files if no configuration exists.
    • --symlink name - If you don't want to use tools as the symlink you can specify another name.
  • styles - Use this task to manually trigger styles processing pipeline.
    • --theme name - Process single theme.
    • --disableMaps - Toggles source maps generation.
    • --prod - Production output - minifies styles and add .min sufix.
    • --ci - Enable throwing errors. Useful in CI/CD pipelines.
  • svg - Run svg-sprite to generate SVG sprite.
    • --theme name - Process single theme.
  • watch - Watch for style changes and run processing tasks.
    • --theme name - Process single theme.
    • --disableLinting - Disable SASS and CSS linting.
    • --disableMaps - Enable inline source maps generation.

PHP

  • php bin/magento enable:module

  • php bin/magento disable:module

  • php bin/magento setup:upgrade

  • php -f bin/magento cache:flush

  • php bin/magento indexer:reindex

  • php bin/magento deploy:mode:set developer

  • php bin/magento deploy:mode:set production

  • php bin/magento setup:static-content:deploy -f

Magento Theme

  • 1 - composer install
  • 2 - npm install
  • 3 - gulp styles
  • 4 - gulp babel
  • 5 - php bin/magento setup:static-content:deploy -f

Website Environment

  • magento2 environment required

  • install node.js, and keep npm version < 9.0.0

  • npm install gulp gulp-cli sass -g

  • cd website file, and npm i

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.