Home

Build

/Resources/Build

Gulp Task Overview

JavaScripts

• Linting with ESLint rules.
• Converting browser-compatible Javascript with Babel.
• Uglifyed
• Minifyed
• Copy to Resources/Public folder
• Sync Delete function

Styles

• Linting with Stylelint rules
• Automaticstyle formatting with stylefmt. It's a tool that automatically formats CSS according to stylelint rules.
• Converting SASS to CSS
• Cleaning Styles
• Autoprefixer
• Adding Sourcemapp
• Minifyed
• Sync delete function
• Copy to Resources/Public folder

Images

• Imagemin JPG
• Imagemin SVG
• Imagemin PNG
• Imagemin GIF
• Copy to Resources/Public folder
• Sync delete function

CKEditor

• Plugin: Wordcount (with dependency: Notification)
• Copy to Resources/Public/CKEditor folder
• Sync delete function

Fonts

• Bootstrap fonts
• Copy to Resources/Public/Fonts folder
• Sync delete function

Misc

• Just a Copy and Paste folder for anything that has no place to be
• Copy to Resources/Public/Misc folder
• Sync delete function

Structure overview

Build   |
	  	- Assets | following getting synced to Resources/Public
	  	         | 	
	  	 		 - CKEditor
	  	 		 - Fonts
	  	 		 - Images
	  	 		 - Javascript
	  	 		 - Misc
	  	 		 - Scss 
	  	 		 
     	- Gulp   | Main Gulp Task 
     		   	 |
      			 - task:ckeditor
     			 - task:clean
     			 - task:fonts
     			 - task:images
     			 - task:misc
     			 - task:scripts
     			 - task:styles

Features

Modernizer

It is possible to generate a custom Modernizr JavaScript file.

In package.json its possible to activate the Gulp-Task in "config -> modernizr -> active".

Set active to true and define the wanted features in the "addFeatures" object. Dont forget to link the generated file from Resources/Public/JavaScript/ folder in your Typoscript.

"modernizr": {
  "active": false,
  "settings": {
    "quiet": true,
    "cssPrefix": "",
    "addFeatures": [
      "css/opacity",
      "es6/promises"
    ]
  }
}