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 updatebrew 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 eslintIf 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:
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
License
Licensed under MIT, see LICENSE