A brief introduction to Code's front end build tools and processes and why we use them and what we use them for and who should use them.

2BUILD TOOLS - DISCIPLINE MEETING

“I just run 'Gulp' and don't know what the f*** it does”Tierney, M (2015).

OR

3BUILD TOOLS - DISCIPLINE MEETING

What are they?

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 4

• Grunt• Gulp• Broccoli • NAnt• etc….

What are they?

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 5

• New projects - Gulp• Legacy projects - Grunt

Which do we use?

6BUILD TOOLS - DISCIPLINE MEETING

GULP

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 7

• Runs on Node• Uses NPM

- package.json for dependencies• npm install gulp –g • npm install gulp-plugin -D

Gulp?

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 8

• Faster- Streams instead of writing to disk

• Growing support, more plugins- Plugins do one thing well- Can use Node packages directly

• Easier to configure- Write JS instead of using plugin

Gulp vs Grunt

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 9

• Grunt Runs sequentially- Tasks run one after each other- Gulp doesn’t yet… BRING ON V4!

• Need to use gulp runSequence to get around this- Allows tasks to be ran one after another

Grunt vs Gulp

10BUILD TOOLS - DISCIPLINE MEETING

What are they for?

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 11

• HTML- Compiling templates to

HTML- Data-driving templates- Reusing data/templates - DRY code

What are they for?• CSS

- Compiling Sass to CSS - Benefits of Sass - Linting to catch errors- Minification for production

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 12

• JavaScript- Concatenate files- Modular files to work with- Linting to catch errors- Formatting for consistency- Minification for production- Run tests

What are they for?• Other

- Image processing- Copy/clean

assets/directories- Running local server- Browser-sync

13BUILD TOOLS - DISCIPLINE MEETING

gulpfile.js

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 14

15BUILD TOOLS - DISCIPLINE MEETING

Why do we use them?

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 16

Having a standardised, shared setup speeds up work

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 17

Consistency across projects ♥

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 18

Takes away monotonous tasks

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 19

Avoids repetition

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 20

Takes away some human erorr

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 21

Avoids repetition

03/05/2023BUILD TOOLS - DISCIPLINE MEETING 22

Gives everyone more confidence to pick up front end tasks

Thanks.We will be running a build tools learning session for Grunt and Gulp.https://github.com/furzeface/build-tools-workshop/