Available Gulp Tasks

UnderStrap provides a set of gulp tasks to automate compilation and minification of stylesheets and JavaScript.

Make sure you have gulp and node installed.

Please follow instructions provided in Development » Developing with npm and gulp

There is a good amount of Gulp-Tasks available, but you´d probably only want to use a few of them. Most of them are explained below.

Gulp BrowserSync

gulp watch-bs

Explanation:

  • Triggers BrowserSync to watch any file in the understrap-folder for changes.
  • Will autocompile SCSS, Javascript and minify images upon changes.
  • Needs setting up browserSyncOptions in ./gulpconfig.json correctly.

Gulp sass

gulp sass

Explanation:

  • Compiles all SCSS files from ./sass into CSS. Needs to be run manually each time when you want to re-compile SCS into CSS code.
  • Runs autoprefixer for latest 2 Browser-Versions and generates Sourcemaps.
  • Does not minify files. See gulp cssnano.

Gulp cssnano

gulp cssnano

Explanation:

  • Discards all comments.
  • Minifies theme.css from ./css and renames it to theme.min.css.
  • Leaves the original, human-readable theme.css in place.

Gulp minifycss

gulp minifycss

Explanation:

  • Minifies everything but theme.css from ./css and renames them to corresponding *.min.css.
  • Leaves the original, human-readable *.css in place.

Gulp cleancss

gulp cleancss

Explanation:

  • Minifies theme.css from ./css and renames it to theme.min.css.
  • Leaves the original, human-readable theme.css in place.

Gulp styles

gulp imastylesgemin

Explanation:

  • Is a task runner that runs gulp sass and gulp minifycss in a sequence.

Gulp scripts

gulp scripts

Explanation:

  • Takes ./src/js/bootstrap4/bootstrap.js, ./src/js/skip-link-focus-fix.js and ./src/js/custom-javascript.js and compiles them into one concatenated file in ./js/theme.js.
  • Will be uglyfied into ./js/theme.min.js at last.

Gulp imagemin

gulp imagemin

Explanation:

  • Minifies images located in ./src/img and copies the minified files to ./img.

Gulp Generate Distribution

gulp dist

Explanation:

  • Creates a ./dist folder and copies all needed files for distribution as simple theme.
  • Does not contain any development files (like ./src, ./sass or ./node_modules).

Gulp Generate Distribution with Production Environment

gulp dist-product

Explanation:

  • Creates a ./ dist-product folder and copies all needed files for distribution as a simple theme with all production assets.
  • Does contain development files like ./src and ./sass.

The following scripts should not be run manually - except when you know exactly what you are doing!

Gulp Clean Sourcecode Folder

gulp clean-source

Explanation:

  • Deletes anything in the ./src folder.

Gulp Copy Assets from Bower

gulp copy-assets

Explanation:

  • Copy all needed dependency assets files from bower_component assets to themes ./js, ./scss and ./fonts folder.
  • Run this task after bower install or bower update