What assets tools are you using? Brunch, Webpack, Gulp ..etc

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: mbu | Hex

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: lib/mix/tasks · master · CodeStats / code-stats · GitLab
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

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.

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).

I’m giving up no Brunch for a Phoenix 1.3 & VueJS 2 project. I just can’t get it to work.

What kind of build time differences can I expect from using Webpack?

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.

You can generate css file with extract-text-webpack-plugin, but I agree it is not the easiest config file.

But You should look once at sendmail configuration files then anything else would look damn easy.

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.

Eyup.

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): GitHub - OvermindDL1/overbots · GitHub

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. ^.^

I use webpack. once You get the config file working, it’s quite powerful.

But, I find it slow, limit very slow…

I do remember @OvermindDL1 using rollup js with npm scripts as a faster solution.