https://github.com/SnowdogApps/magento2-frontools

Set of front-end tools for Magento 2 based on Gulp.js
https://github.com/SnowdogApps/magento2-frontools

browsersync csslint gulp hacktoberfest magento magento2 magento2-extension sass sass-lint stylelint toolset yarn

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/SnowdogApps/magento2-frontools
• Owner: SnowdogApps
• License: mit
• Created: 2016-01-27T17:23:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-08T14:28:27.000Z (5 months ago)
• Last Synced: 2024-06-30T18:09:13.969Z (3 months ago)
• Topics: browsersync, csslint, gulp, hacktoberfest, magento, magento2, magento2-extension, sass, sass-lint, stylelint, toolset, yarn
• Language: JavaScript
• Size: 2.41 MB
• Stars: 431
• Watchers: 34
• Forks: 142
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-magento - Magento2 Frontools - Set of front-end tools for Magento 2 based on Gulp.js. (Deployments / Full Page Caching)

README

        
# **DEPRECATED** 

## This is no longer supported, please consider using [Cream fork](https://github.com/creaminternet/magento2-frontools) instead.

[![Packagist](https://img.shields.io/packagist/v/snowdog/frontools.svg)](https://packagist.org/packages/snowdog/frontools) [![Packagist](https://img.shields.io/packagist/dt/snowdog/frontools.svg)](https://packagist.org/packages/snowdog/frontools)

## Magento 2 Frontools

Set of front-end tools for Magento 2

## Requirements

* Unix-like OS (please, do not ask about Windows support)

* Node.js [LTS version](https://nodejs.org/en/about/releases/). We recommend using [Volta](https://volta.sh/).

* Magento 2 project with SASS based theme for example [SASS version of "Blank"](https://github.com/SnowdogApps/magento2-theme-blank-sass) or [Alpaca Theme](https://github.com/SnowdogApps/magento2-alpaca-theme)

## Installation

1. Run `composer require snowdog/frontools`

2. Go to package directory `cd vendor/snowdog/frontools`

3. Run `yarn` or `npm install`

4. Decide where you want to keep your config files.

You can store them in Frontools `config` directory or in `dev/tools/frontools/config` (recommended).

There is a `setup` task to copy all sample config files from the `config` to `dev/tools/frontools/config` and create a convenient symlink `tools` in the project root.

If you want to keep config files inside frontools `config` dir, you have to handle this manually.

5. Define your themes in `themes.json`.

## `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` - (default `["autoprefixer({ overrideBrowserslist: browserslist })"]`) 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. Warning, enabling this option may lead to high CPU utilization! [chokidar docs](https://github.com/paulmillr/chokidar#performance)

## `sass-compiler.json` structure

You can choose Sass compiler between the default, but [already deprecated](https://github.com/sass/node-sass/issues/2952), `node-sass` or a newer and faster `dart-sass`.

Since the Dart Sass does not have the same set of features as Node Sass, for now we will keep the older version as default.

## Optional configurations for 3rd party plugins

You will find sample config files for theses plugins in `vendor/snowdog/frontools/config` directory.

* Create [browserSync](https://www.browsersync.io/) configuration

* Create [eslint](https://eslint.org/) configuration

* Create [sass-lint](https://github.com/sasstools/sass-lint) configuration

* Create [stylelint](https://github.com/stylelint/stylelint) configuration

* Create [svg-sprite](https://github.com/jkphl/gulp-svg-sprite) configuration

## Tasks list

Use `yarn [taskName]` or `npm run [taskName]` to run the task.

* `babel` - Run [Babel](https://babeljs.io/), 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](https://github.com/stylelint/stylelint) based tests.

  * `--theme name` - Process single theme.

  * `--ci` - Enable throwing errors. Useful in CI/CD pipelines.

* `dev` - Runs [browserSync](https://www.browsersync.io/) and `inheritance`, `babel`, `styles`, `watch` tasks.

  * `--theme name` - Process single theme.

  * `--disableLinting` - Disable JS, SASS, CSS linting.

  * `--disableMaps` - Disable inline source maps generation.

* `emailfix` - Fixes email stylesheet for Magento < 2.3.0. [Related issue](https://github.com/MyIntervals/emogrifier/issues/296)

  * `--prod` - Production output - minifies styles and add `.min` sufix.

* `eslint` - Run [eslint](https://eslint.org/) against all JS files.

  * `--theme name` - Process single theme.

  * `--fix` - Autofix errors

  * `--ci` - Enable throwing errors. Useful in CI/CD pipelines.

* `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.

* `magepackBundle` - Run [magepack](https://github.com/magesuite/magepack) `bundle` command.

  * `-c` or `--config` - (required) Path to previously generated Magepack config file.

  * `--theme name` - Process single theme.

* `magepackGenerate` - Run [magepack](https://github.com/magesuite/magepack) `generate` command.

  * `--cms-url` - (required) URL to one of CMS pages (e.g. homepage).

  * `--category-url` - (required) URL to one of category pages.

  * `--product-url` - (required) URL to one of product pages.

  * `-u` or `--auth-username` - Username for Basic Auth.

  * `-p` or `--auth-password` - Passoword for Basic Auth.

  * `-d` or `--debug` - Turn on debugging mode.

* `sasslint` - Run [sass-lint](https://github.com/sasstools/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` - Disable inline source maps generation.

  * `--prod` - Production output - minifies styles and add `.min` suffix.

  * `--ci` - Enable throwing errors. Useful in CI/CD pipelines.

* `svg` - Run [svg-sprite](https://github.com/jkphl/gulp-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 JS, SASS, CSS linting.

  * `--disableMaps` - Disable inline source maps generation.