Kirby workflow automation with Gulp, Browsersync, php-connect and stylus

First off I’d like to say hello and thank @bastianallgeier et al. for their work on this awesome CMS!

I am only just getting started in web design and development, but have used Kirby for both sites that I have created and hosted publicly. Whilst making those sites I have been working on a workflow utilising Gulp for task automation.

Anyway the long and short of it is that I have uploaded a directory template and gulpfile to github for basic task automation with gulp and serving it using Browsersync and php-connect and thought some people out there might find it useful :slight_smile: . You can find the repo here: https://github.com/ElliotSmith91/Kirby-Stylus-Gulp

There is still work to be done on it, but for now it works and as I say, I am only just getting started with all of this. I hope some people find this useful as I didn’t find too much information about workflow automation including kirby apart from this forum post Kirby + Gulp + Browsersync + Sass, and I realise it is a very personal thing to set-up oneself. Let me know if you found this useful! :slight_smile:

2 Likes

Nice one! Its great when you finally get Gulp to do what you want it to do. For me, that process took years and I ended up with 10 times the code you have. The trap of things like Gulp and Grunt is that you get addicted to adding tasks.

My system did EVERYTHING! It compiled SASS, it optimised images, it generated spritemaps, it even created HTML email templates from MJML. It could even deploy my site for me. It was great. But there was also a problem. It was huge! I Ended up with around 1,500 lines of code and a truck load of dependencies. That’s way too many moving parts. You also find your self writting silly stuff in tasks to rename files and merge streams… :frowning:

I don’t wish to rain on your parade, but you can do the same thing you just going on Gulp in around twenty lines of code - without Gulp! Yeah, you heard right. No Gulp.

So here’s the bombshell: NPM itself can run commands. A few months back i ditched Gulp all together because for the most part Gulp plugins are essentially just wrappers around command line utilities. The result is a much leaner project, far less NPM dependcies and a much leaner automation code base.

Combine this with something like Scotchbox or Valet and you have yourself a killer development environment.

Heres my starting point for any kind of site: https://github.com/HashandSalt/NPMboilerplate

Good luck!

1 Like

Woah, Mind = blown…

Thanks a lot for pointing me towards this, I’ll definitely have to take a more in depth look at what you posted!

The Javascript world seems to be forever changing aha - as soon as you start to be getting used to something it seems something else appears!

Thanks a lot for the hint again, and I’ll be sure to try it out! :smiley:.

No worries. This article is worth a read https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/