gulpfile.js

gulpfile.js is a delicious blend of tasks and build tools poured into Gulp to form a full-featured modern asset pipeline. You can easily be integrated to the development environment and site or app structure.

Usage

Make sure Node installed. I recommend using NVM to manage versions.

$3

If you use this library the first time, you need to be shure all global dependencies are installed correctly:

``bash


Install Yarn

brew update
brew install yarn

Uninstall Gulp

npm uninstall --global gulp gulp-cli

Install ScssLint

gem install scss_lint

Install some plugins globally

npm install --global gulp-cli eslint
`

If the global dependencies are installed, you can install the rest with yarn.

$3

If you have gulp installed globally, you can simple run gulp, optional with some flags. With gulp -T you can print out all the options.
If there's a global gulp in a different version, you have to use this commands:

Command | Watcher | Behaviour
------------------- | ------- | ---------------------------------------------------------
yarn start | x | Generates all Assets, Javascript and CSS files
yarn run tasks | | Show all available tasks
yarn run beautify | x | Beautify and dont't compress files
yarn run debug | x | Files dont't get compressed and sourcemaps get genereated
yarn run maps | x | Write sourcemaps
yarn run build | | Runs the build process for production
yarn run css | | Render CSS Files
yarn run scss | | Render _all.scss and _allsub.scss Files
yarn run js | | Render Javascript Files
yarn run images | | Optimize images and overrite them in the source folder




Overview

Features | Tools Used
-------------- | ---------------------
CSS | Sass (Libsass via node-sass) and PostCSS
Javascript | Rollup JS with Bublé or Babel
Images | Compression with imagemin. Run width gulp optimizeImages. Overwrites files in the resource folder.
Icons | Auto-generated SVG Sprites and/or Icon Fonts
Lint | ScssLint and ESLint included

You can configure the behaviour with the gulp.json in the root folder. To turn of a certain task, for example, just do it like this:

`json
{
"tasks": {
"js": false
}
}
`

Take a look into config.json the figure out which options are available. The script loads also the informations (description, author and homepage entry) from composer.json




CSS

$3

These small helpers can make your developer life much easier. These files get filled automatically by the gulp task scss

Filename | Description
-------------------- | ----------------------
_all.scss | Every file from the same directory get an @import statement. Files with beginning underscore (_) get ignored.
_allsub.scss | Every file from sub directories an @import statement. Files and folders with beginning underscore (_) get ignored.




$3

Following plugins are included:

Plugin | Description
--------------------------------------------------------------------------------------- | ----------------------
postcss-rtl | PostCSS plugin for RTL-optimizations. Turned off by default
postcss-assets | PostCSS plugin to manage assets
postcss-magic-animations | Plugin that adds @keyframes from Magic Animations
postcss-vmax | Use vmax units in Edge and Internet Explorer
postcss-short | Short creates and extends shorthand properties in CSS
postcss-center | PostCSS plugin to center elements
postcss-grid-kiss | A PostCSS plugin to keep CSS grids stupidly simple
rucksack-css | A little bag of CSS superpowers
postcss-flexbox | Flexbox layouts made easy with PostCSS
pleeease-filters | Convert CSS shorthand filters to SVG ones
postcss-selector-matches | PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS selectors
postcss-selector-not | PostCSS plugin to transform :not() W3C CSS leve 4 pseudo class to :not() CSS level 3 selectors
postcss-pseudoelements | PostCSS plugin to add single-colon CSS 2.1 syntax pseudo selectors (i.e. :before)
postcss-quantity-queries | PostCSS plugin enabling quantity-queries
postcss-fixes | PostCSS plugin to fix known Browser Bugs.
css-mqpacker | Pack same CSS media query rules into one media query rule.
postcss-round-subpixels | Plugin that rounds sub-pixel (eg: 12.87378px) values to the nearest full pixel.
postcss-reporter | Log PostCSS messages in the console
postcss-pxtorem | A plugin for PostCSS that generates rem units from pixel units.
cssnano | Minify & autoprefix final css files

Plugins for Editors

$3

Package | Command
------- | -------
ScssLint | apm install linter-scss-lint
ESLint | apm install linter-eslint
Fusion | apm install language-typoscript2`

$3

* ScssLint
* ESLint
* Neos

License
-------

Licensed under MIT, see LICENSE