Easing tool fatigue in front-end workflow
As part of the forward thinking team at UVD, I’m no stranger to tool fatigue and the frustrations that go with it. Having at least 10+ gulp plugins running all manner of tasks from, SCSS compilation, TemplateCache generation, test running and TypeScript transpilation.
Many of us are used to composing large gulpfiles or gruntfiles to perform build and development tasks as we develop complex projects, but recently I’ve been utilising the power of
npm scripts to run tools straight from the command line.
npm scripts is nothing new, and there are a number of articles that detail how powerful they can be, and why we should all be using them.
Previously my go-to tool was gulp, I used this tool for serving assets, transpiling code, building styles and many, many other tasks. Now I’m not suggesting that Gulp is dead or that it shouldn’t be used.. but it can hoover up a lot of resources while it’s completing tasks and watching for changes.
Here’s an example of some of my later Gulpfile’s (used with Babel as you’ll notice the ES2015/ES6 syntax). Also note that I’ve split other tasks into separate files, which are being imported in at the top of the file.
If I was to take this now and have a first attempt at moving some of this to the command line. I’d first look at the test tasks.
These tasks could be moved to npm and might look something like the following:
In this instance, we are still using gulp to build our template cache for the tests but we’re using the gulp task in isolation as opposed to relying on gulp for all the things!
One major benefit of introducing JSPM into the mix was browser transpilation. Rather than watching and transpiling code on save (which is a fairly intensive task), I can now give the browser my typescript and ask JSPM with SystemJS to transpile my code in the browser. This provides source mapping and on the fly transpilation out of the box, magic!
This also removed a large chunk of gulp tasks and freed up machine resources, ultimately making it quicker to develop with a faster feedback loop.
To illustrate what your
npm scripts might look like when you’ve made it your predominant build tool, here’s a snippet from a project I have worked on recently:
Is this your preferred method of controlling your front-end tools? Or do you have an argument for gulp/grunt over this approach? Let me know below!