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.

Install Dependencies

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

# 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.

Run Gulp

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:

{
	"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

SCSS

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.

PostCSS

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

Atom

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

PhpStorm and WebStorm

• ScssLint
• ESLint
• Neos

License

Licensed under MIT, see LICENSE