Well, Phoenix has Brunch.js as default asset tool compiler. I like a lot because is simple but not seems like a good choice because of his popularity and support(last update 4 months ago in Github).
What tools did you guys use?
I try setup webpack but is a very complicated tool that seems is made for SPA applications, is scary take a look on webpack.config.js for people who not know the tool.
I’ve found Gulp.js some days ago and I’m thinking in switch Brunch with Gulp in my Phoenix projects, any opinion on this?
NPM itself is ‘also’ a build tool, so I don’t see the point to add on another on top of it like brunch or so when you can easily just set it up as npm build scripts straight. There are some awesome libraries that make it trivial to parallize parts and such as well. This is not a phoenix project but my bucklescript example repo shows how to use npm build scripts as it (and remember, I’m not doing it here, but you can slave out to external javascript files too, just check the package.json): https://github.com/OvermindDL1/overbots/
I actually end up doing more capabilities in less code than even a short brunch script. I think people slave out to build systems on top of npm far too fast personally.
And yes, webpack1 was very very horribly slow. Webpack 2 is faster. An upcoming webpack 2 version is even much faster (getting closer to brunch in speed), so not a bad option anymore if you need it, but I still prefer npm scripts. ^.^
Hum, Yeah, I’ve had a bad experience just to understand that CSS by default did not generate an CSS file but you need to require it in some javascript file. I think Webpack overcomplicates…is a very powerful tool for sure, but just a minimal config that generates a CSS file and a JS file deals with a lot of stuff.
I’m perfectly fine with Brunch and I was using all kind of tools before: Grunt, Gulp, Webpack. Webpack is slow and adds complexity which I don’t need, through it has more optimisation options then Brunch, Gulp and Grunt are just Node.js task runner similar to Mix in Elixir and I think it’s bad choice for Phoenix projects.
Use Webpack if you need to optimise your build size and tune it in every way possible, otherwise save your effort for a more useful work and use Brunch.
I don’t think speed is necessarily Webpack’s thing. Our AngularJS system takes 10–30 seconds to build depending on if you minify it, but then again changes are processed in a couple of seconds when using webpack-dev-server so it’s not an issue.
IMO Webpack is good in that it’s very featureful and it has a lot of community support, meaning plugins and docs. On the other hand it can be a hell to set up and the end result is very magical (in good and bad).
Also keep in mind that those raw build times don’t imply it’s always taking that much time. When watching for changes webpack will cache most of it’s stuff and only redo the things, which changed.
Now to answer the question, I wrote my own build system since the world doesn’t have enough of those and I got fed up with all the JS tools. I use it in my own projects but I put it on Hex.pm too: https://hex.pm/packages/mbu
It’s pretty much Mix + task dependencies + watch support and I use it to actually call all those NPM tools that do the JS/CSS/HTML building. I intend to add some more light helper things in the future to avoid too much typing but I want to keep it non-magical and easily understandable.
Here it is in my current project: https://gitlab.com/code-stats/code-stats/tree/master/lib/mix/tasks
The main task there is frontend.build. There’s many tasks since there’s two frontends to build (frontend and battle). It’s pretty verbose but at least I understand what’s happening. I’m planning on adding semiautomatic output directory path handling so it will be a lot less typing in the future. If you want to ask something, I have another topic here: MBU - Mix Build Utilities
then anything else would look damn easy.
