Hey guys, Iām sharing this super simple build setup Iāve used for Kirby projects! Stylus, Twig, Webpack, Livereloadsā Gets the plumbing out of the way so you can start making 
Check it out! Hope you guys find it useful!
Does not seem exactly simple 
Maybe simple times 3000
trust me itās simple! If you havenāt been using build tools or new to it, I think this would be a nice introduction!
What happens if one of the 2000 (fast guess after looking at your yarn.lock) dependencies fail?
Iām not that good at this 'gitpull tooliganāism but things like this give me a WTF headache:
yargs@^6.0.0, yargs@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
dependencies:
camelcase "^3.0.0"
...
yargs@~3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
dependencies:
camelcase "^1.0.2
but anyway, iām just a old senile webdev, if it works for youā¦ keep going!
svnt
PS: nice read: https://www.webrocker.de/2017/01/01/tooligans/
Well i just wanted to point out that it is not a simple setup.
I am not new to js ecosystem and if i was wellā¦ i honestly donāt think i would be as great introduction as you imagine.
Using yarn? Both webpack and gulp why (you can do basicaly same thing with each)? Its not exactly easy. You would probably confuse lot of people.
But i guess i am also getting old as @Svnt so donāt let that discourage you @the_ezekiel!
Btw i dont think you need gulp-plumber anymore, the error handling in gulp was fixed year or two ago. You should be fine using .on(āerrorā, loggerFn) just after the desired pipes .pipe().on().pipe
Bang one dependency down!
1 Like
I AM new to the JS ecosystem. Currently only use codekit to compile everything and use livereload.
Any good resources on using webpack to do everything?
Resources - i like courses from Frontend masters, egghead.io or pluralsight. I think most of them have something around webpack.
But webpack might not be the best start i think. Webpack is advanced tool and its purpose is to be able do basicaly include js files and pack them to one file while doing some smart optimalisations. It is complicated and it is worth it only if you are doing javascript heavy frontend (you use something like react and render templates on client).
Since whole purpouse of kirby is to render stuff on your server using nice templates i believe the are not many gains webpack can give you.
There is another thing - webpack is configuration based - you write big config. You will be learning lot of webpack but not much javascript - is much better to learn javascript because webpack might be replaced next time you will need it :)) (javascript world, things change all the time).
Gulp is alternative - it is basicaly codekit which you can program yourself in any way you need (and plug in anything js ecosystem offers). Its also about writing little javascript program so you are learning JS and not how to write config. Its also much easier.
I would send you some basic config but i believe there are lot of tutorials that will teach you Gulp much better. Google some, try it and if you will have some problems you can always post it here or in gulp comunity and someone will help :))
1 Like
First of all, thanks for sharing your solution.
Iād be interested to know why you call this setup simple with that many dependencies and using more than one build tool?
Well, maybe if everything runs smoothly and just works out of the box, then running a simple command to build everything is perfect. But I doubt everything is as easy if you have to make any changes or if it doesnāt just work. Then you first have to understand whatās happening.
Iām just afraid that people who have never used any build tools will fall prey to the label āsimpleā.
Correct me if Iām wrong, but I donāt think those are equivalent. Defining an error handler after each pipe is not the same as what gulp-plumber does, which is ā in addition to logging ā to catch the error and let the task go on. I doubt gulp 3 changed their āif a pipe throws, the task is haltedā behavior, that would be a breaking change (and probably not something that the gulp maintainers like as a default anyway).
@the_ezekiel: It seems to be a strange choice to use twig.js, and not Twig in PHP, since Kirby is a PHP application and templates are not exactly static assets.
I am not exactly sure about the details but i have all the tasks nowdays without plumber and tasks dont halt execution when error comes up (i was suprised myself). I think something of what you said actually happened - gulp 3 changed how .pipe works.
I can see the reason for using plumber if you have some big chain of pipes you can take care of it just using plumber but its a small thing.
By the way more evidence of the above - plumber hasnāt been updated for more than a year, it doesnāt work in gulp 4 and there are people asking about the same issue in the threads on github.
Imporant thing for me is that stuff works and i got rid of plumber.
But it is baffling indeed. There is no response on this topic from any of the maintainers of gulp or plumber. You will find lot of people realy not knowing why it works not or if plumber is still needed.