Decide on an approach to gulp-free task scripting

[domoscargin]

What

Investigate approaches to scripting our task functions.

We're currently replacing gulp tasks with vanilla functions, but we're still running these functions via wrapping Gulp tasks. This means we have several task files which export these new functions, but no scripting for actually collecting and running a set of those tasks together.

Some initial ideas include:

• Making heavy use of npm scripts, but keeping them simple by abstracting them into external files
• Having a large collection of "scripting" files that each run a set of tasks
• Having one scripting controller file that takes an argument and runs the correct set of tasks

Why

We have made the decision to move away from Gulp and write our own build scripts.

Assumptions

• devs are likely going to naturally interact with the build tools via npm (ie, "standard" commands like: npm start, npm test, etc)

Timebox

2 days
We should review progress after this period of time has elapsed, even if the spike has not been 'completed'

Who is working on this?

Spike lead:

Spike buddy:

Questions to answer

• What are other projects who've moved from Gulp to vanilla/NPM scripts doing? (eg: The Prototype Kit team!, Bootstrap)
• Should we differentiate between tasks that do one thing and tasks that run several subtasks?
• Should we have lots of individual task scripting files that each execute a series of functions, or one file that can be passed an argument and decide which functions to run? Or something else?
• Do we need to consider streaming?

Done when

You may find it helpful to refer to our expected outcomes of spikes.

• Questions have been answered or we have a clearer idea of how to get to our goal
• Findings have been reviewed and agreed with at least one other person
• Findings have been shared, e.g: via a write-up on the ticket, at a show & tell or team meeting

[joelanman]

Prototype Kit Gulp removal work is here:
alphagov/govuk-prototype-kit#1324

[domoscargin]

I've added some more analysis to my Gulp Stuff™ Spreadsheet, looking at our NPM scripts: https://docs.google.com/spreadsheets/d/1aprdKVIx6FzBtX9ohWx6LR8p5XH3s2PNq1tev1ZwxkY/edit#gid=77403370

There's a sheet comparing the tasks our npm scripts actually perform under the hood, and a deeper dive into the SCSS and JS compilation tasks because they're quite convoluted.

Some takeaways:

• npm run heroku and npm start are very similar, except the heroku script doesn't clean the public folder, and doesn't watch file changes
• build-release, publish-release and pre-release all run .sh scripts, so there is precedence for doing things that way (but that relies on devs being comfortable with bash scripts - most FE devs are more likely to be comfortable with JS?)
• npm run build-release runs check-nvmrc 3 times, CSS compilation twice and JS compilation three times.
• Stepping through our tasks to audit them is a pain of looking up nested tasks