Package-Information

This Sourcecode belongs to the webexcess open source initiative of Neos Packages built at dotpulse.

Please have a look at the Information-Page.

---

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.

Clone from bitbucket

# Go into an empty folder
# Clone from bitbucket
hg clone ssh://hg@bitbucket.org/dotpulse/gulpfile.js ./
# Make the repo your own
rm -rf .hg .hgflow .flow .hgtags

Usage

Make sure Node installed. We 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 jshint

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

Overview

Features	Tools Used
CSS	Sass (Libsass via node-sass) and PostCSS
Javascript	Browserify with 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, ESLint and JSHint included

You can configure the behaviour with the gulp.json in the root folder. To turn of a certain task, 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 in the Neos or Flow folder.

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-at-warn	@warn for PostCSS.
lost	PostCSS fractional grid system built with calc() by the guy who built Jeet. Supports masonry, vertical, and waffle grids.
postcss-short	Short creates and extends shorthand properties in CSS
postcss-utilities	postcss-utilities is a PostCSS plugin that have the most used mixins, shortcuts and helpers to use as @util rules in yours stylesheets.
postcss-center	PostCSS plugin to center elements.
rucksack-css	A little bag of CSS superpowers
postcss-flexbox	Flexbox layouts made easy with PostCSS
postcss-assets	PostCSS plugin to manage assets
postcss-flexibility	PostCSS plugin for Flexibility polyfill
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
css-mqpacker	Pack same CSS media query rules into one media query rule.
postcss-fixes	PostCSS plugin to fix known Browser Bugs.
cssnano	Minify & autoprefix final css files

Javascript

For easier include of files, gulp-include is integrated into the building process. Babel can be turned off via an gulp.json config file.

Plugins for Editors

Atom

Package	Command
ScssLint	apm install linter-scss-lint
ESLint	apm install linter-eslint
JSHint	apm install linter-jshint
TypoScript 2	apm installlanguage-typoscript2

PhpStorm and WebStorm

• ScssLint
• ESLint
• TypoScript 2* * *

License Terms

DE: Dieses Package wird durch webexcess unter der GNU GPLv3 Lizenz verwaltet. Dieses Package und darin enthaltene oder hinzugefügte Quellcodes können exklusiv durch webexcess in Teilen oder als Ganzes zusätzlich und unter eigenem Namen unter der MIT-Lizenz veröffentlicht werden.

EN: This package is managed by webexcess under the GNU GPLv3 license. This package and any sourcecode wich is included or added to it may be published exclusively by webexcess, in whole or in part, under its own name under the MIT license.