An opinionated frontend workflow based on jonnitto/gulpfile.js


001.2.33 years ago4 years agoMinified + gzip package size for @networkteam/gulpfile in KB


license npm Build Status


@networkteam/gulpfile is a so called hard-fork of the public package gulpfile.js by jonnitto .

The main reason behind this kind of fork is the way we want to use this package. It is inspired by the package.json of create-react-app.


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
gem install scss_lint

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


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



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.


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


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

PhpStorm and WebStorm


Create a new version with npm version ..., e.g. for a patch release:

npm version patch

This will automatically push the tags to the repository and trigger a release to the NPM registry via a Travis CI build.


Licensed under MIT, see LICENSE

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.