How have you integrated compilers and transpilers into Kirby Site?

I’ve never used compilers like gulp or transpilers like babble.js for my previous sites since they’ve generally been smaller scale. However, I’m starting a new web development project this coming week which is probably going to be the largest website I’ve worked on to date.

My collaborator was trying to set up gulp and babel.js through npm integrated with Kirby in a previous project of theirs but kept receiving errors until they ended up finding a really haphazard way to make it work.

A solution to their specific issue isn’t what we’re looking for but we do want to know how other Kirby users here have integrated compilers and transpilers into their workflow.

Any advice, tips, or personal workflow layout appreciated :slight_smile:

I previously used Gulp, but currently use Laraval Mix. The trick is to use 2 subfolders inside your project. A src folder and a public folder (this is where Kirby goes). I put all the raw SCSS files and javascript in the src folder and set the destination as public/assets.

You can see a working example here -

You can use the same principle with Gulp or Grunt.

I used gulp in the past and decided I wanted to be “closer” to the helpers (sass, postcss, …) and not rely on gulp-plugins (that exist or not, or are no longer maintained, …) for that.

I switched over to creating my own npm scripts managed via nps and have much less problems with dependencies, node updates etc ever since.

Thanks y’all! Will check these out
If other people want to continue posting how they do it. Please do :slight_smile: