Gulp.js

---

There are 3 main Gulp.js tasks defined in gulpfile.js:

• $ npm run gulp help - Shows additional configuration options for the other 2 tasks.
• $ npm run gulp default - Is used during development (working with raw/unchanged JS files).
• $ npm run gulp production - Builds/concats/uglifies/compress raw JS/SCSS files for deployment.

The default and production task can be configured with parameters to give you more control over the final output files.

Important: Build tasks will also generate/optimize images from ./img folder and save the generated images in ./public/img/[VERSION_TAG]/ dir. Therefore you need to install GraphicsMagick.

---

gulp help:

Run help Gulp task.

$ npm run gulp help

You can see a brief summary about the main configuration flags for the task you are currently running E.g.:

---

gulp default:

Run default Gulp task during development.

$ npm run gulp default

This tasks watches for JS/SCSS/image file changes and will…

• … clean dist folders ./public/[js|css|img]/[VERSION_TAG]
• … init file watcher for ./js/**/*.js, ./scss/**/*.scss and ./img/**/*.* file changes
• … run JSHint
• … copy raw JS files to ./public/js/[VERSION_TAG]/**/*.js
• … build ./public/css/[VERSION_TAG]/*.css
• … generate ./public/img/[VERSION_TAG]/**/*.*

[VERSION_TAG] is your Pathfinder version. The current version is read from app/pathfinder.ini and should not be changed.

Hint: npm run gulp runs a 'script' named 'gulp' (this is defined in the 'scripts' section in the package.json). This ensures that your local gulp installation is used (node_modules/.bin/gulp). If you already have a global installation of Gulp, it is not used.

---

gulp production:

Run production Gulp task.

$ npm run gulp production

This task will…

• … clean dist folders ./public/[js|css|img]/[VERSION_TAG]
• … run JSHint
• … run RequireJs optimizer (concat JS files into modules) (gulp-requirejs-optimize)
• … uglify JS files (uglify-es)
• … generate JS sourcemaps (gulp-sourcemaps)
• … generate Gzip versions for build CSS/JS files (gulp-gzip)
• … generate Brotli versions for build CSS/JS files (gulp-brotli)
• … copy JS files to ./public/js/[VERSION_TAG]/**/*.js
• … build ./public/css/[VERSION_TAG]/*.css
• … generate ./public/img/[VERSION_TAG]/**/*.*

The production task may take some seconds (30+ seconds)! As a result, you should have all generated files ready for deployment in the ./public folder. The unique [VERSION_TAG] dir in dist path ensures "cache busting" is working correct.

---

More examples [advanced]:

Change defaults: uglify raw Js files, create Gzip files

$ npm run gulp default -- --jsUglify=true --gzip=true

Change defaults: create Js sourcemap files, create Brotli files

$ npm run gulp default -- --jsSourcemaps=true --brotli=true

You can combine all option flags, listed on the help task, in order to overwrite the default settings. This can be helpful when testing multiple output combinations.