What's the best build system for frontend projects?

15 votes

npm scripts 80%

Gulp 13%

Webpack 7%

About the Colummist

eric

Principal Data Visualization Engineer at Workday. Founder of Columm, Html5CanvasTutorials, KineticJS, BigOCheatSheet. Author of HTML5 Canvas Cookbook

http://www.ericdrowell.com

Discussion

13 Comments
  • JustusRomijn
    npm scripts
    3 months ago

    At this moment, for hobby projects/websites I prefer webpack, as I don’t want to think about the development setup and just use their conventions which often are just fine for that. When working with companies on a professional basis, I lean towards npm scripts because I find it easier to pull other developers into the profession of creating builds and tooling. I don’t want them to get discouraged, because they first have to learn grunt/gulp/webpack. Also it is easy to just use whatever package we need, not having to rely on plugins. I think I’m cutting off grunt/gulp, because I don’t really have the need for the middle ground, but if I run in any project that uses that already, then that will work out just fine.

    source
  • NathanWallis
    3 months ago

    Its probably worth mentioning that Webpack also determines your applications dependencies. I am currently using Grunt, and you have to specify the load order of your scripts prior to minification. I haven’t used webpack yet, just read about how it works once I ran into issues trying to get my dependencies loading in the correct order with Grunt.

    source
  • PeterBarraud
    npm scripts
    3 months ago

    Nice quick and easy summary. I’ve used Grunt and I thought it’s not really worth the learning curve. I think npm is the way to go. Not sure but I prefer it even for smaller projects.

    source
  • GilbertPellegrom
    npm scripts
    3 months ago

    I’m inclined to think that npm scripts do seem like a neater solution than having to install and learn the abstractions of build tools like Grunt and Gulp (especially for smaller projects). However, I can imagine your package.json file getting pretty messy and complex for larger projects with loads of scripts. At that point having a separate, dedicated config file for your build probably makes more sense.

    source
  • Phi Phan
    npm scripts
    3 months ago

    I've used npm as build tool for some of my recent projects. I recommemd some other packages like scss-lint for linting sass, postcss for autoprefix, eslint for linting js, babel for es2015. I also use nodemon instead of onchange for watching files.

    source
  • Jonny Kates
    3 months ago

    I've been considering moving to using npm scripts as a build tool for a while, but the performance hit is what stops me adopting it over Gulp. If I'm watching all my Sass partials for example, then time to compile is really my top priority.

    source
  • Cory House
    npm scripts
    3 months ago

    I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with.

    source
  • Dwayne Crooks
    npm scripts
    3 months ago

    I was recently questioning whether I needed Gulp in my workflow and started to use it less and less in my projects.

    source
  • Jason Karns
    npm scripts
    3 months ago

    Using npm scripts directly actually gives you a lot more configuration options.

    source
  • Richard Seldon
    npm scripts
    3 months ago

    My workflow of late has tended to be stick to NPM package.json script entries (certainly) for smaller projects, especially those that are NodeJs centric, or don’t necessarily any more complex transpilation chaining etc.

    source
  • Martin Olsen
    npm scripts
    3 months ago

    I ditched gulp in favour of npm about a year ago after reading this well written article: http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/

    source
  • Gabriel G Baciu
    3 months ago

    Everything can be done via an executable script, you don’t even need npm run to tun it. npm run is just sugar. However if your project is big enough to have a build step such as reading a configuration file, importing conditionally, generating some files based on templates, and you want to do that conditionally sync or async it will be fairly hard via npm scripts. What you will end up is a a script that abstracts a lot of the file system API, doing control flow, naming the tasks which are things that grunt and gulp do, out of the box. So you will be pretty much reinventing the wheel. Running complex build scripts in in npm is like debugging code using Terminal, it works but you are doing it like is 1990's.

    source
  • Vladimir Agafonkin
    3 months ago

    We have hundreds of JavaScript repos at Mapbox and all of them are using NPM scripts (typically with browserify and transforms). No Grunt/Gulp. It works wonderfully — dead easy to set up, understand and manage.

    source

Related Insights