Skip to content

Instantly share code, notes, and snippets.

@elijahmanor
Last active February 20, 2022 12:46
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elijahmanor/179e47828bf760c218bb3820d929836d to your computer and use it in GitHub Desktop.
Save elijahmanor/179e47828bf760c218bb3820d929836d to your computer and use it in GitHub Desktop.
Pros and Cons of `npm scripts` vs Gulp

Comparison of npm scripts vs Gulp

npm scripts

Pros

  • npm scripts are low-level and leverage the actual library you want to use (example: "lint": "eslint ./")
  • package.json is a central place to see what scripts are available (also npm run will list all scripts)
  • When things get too complicated you can always defer to another file (example: "complex-script": "babel-node tools/complex-script.js")
  • npm scripts are more powerful than one might first think (pre/post hooks, passing arguments, config variables, chaining, piping, etc...)
  • We aren't tied to a specific build abstraction (Anvil, brocolli, Grunt, Gulp) when the next big thing comes out.

Cons of npm scripts

  • Not everyone is familiar with npm scripts
  • Some scripts can get lengthy and cumbersome

Handy Modules

  • npm-run-all: A CLI tool to run multiple npm-scripts in parallel or sequential.
  • rimraf: A deep deletion module for node (like rm -rf)
  • onchange: Use glob patterns to watch file sets and run a command when anything is added, changed or deleted.

Gulp

Pros

  • There are lots of Gulp plugins and utilities
  • We already have some helper libraries to provide common Gulp tasks

Cons

  • Gulp plugins often get out of date and don’t support new features from the underlying library
  • You become dependant on the Gulp plugin author and not the library that is being wrapped
  • Documentation for Gulp plugins are typically not very robust or comprehensive
  • Debugging a Gulp plugin can be frustrating. Is the problem in the plugin or in the underlying library?
  • If a plugin doesn't exist already for Gulp you need to write it yourself
  • Errors that occur inside a Gulp wrapper arean't always handled very well

Thoughts to Consider

  • Do we switch to npm scripts only, keep using Gulp, or have a mixture of the two?
  • If we have a mixture of npm scripts and Gulp, how do we decide when to use what? Do we start with an assumption of npm scripts until a certain complexity threshold is met? Do we only use npm scripts for new projects and then split out to tools/script-file.js when the complexity gets high? (See react-slingshot for an example)
  • How do we reconcile projects that have Gulp already in them? Do we keep updating them or do we consider switching them to npm scripts if we find we keep updating them?
@JacobLett
Copy link

Thank you for writing this. I am trying to understand how npm scripts work because Bootstrap 4 is planning to switch to this. Do you know any good learning resources for this?

@jquerygeek
Copy link

jquerygeek commented Nov 5, 2016

@martisj
Copy link

martisj commented Apr 11, 2018

I know this an old Gist: however @elijahmanor have you learned anything new that has affected your thoughts here?

@DylanTackoor
Copy link

^++

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment