Nwt-gulpfile NPM

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