build tools
TRANSCRIPT
![Page 1: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/1.jpg)
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.
![Page 2: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/2.jpg)
2BUILD TOOLS - DISCIPLINE MEETING
“I just run 'Gulp' and don't know what the f*** it does”Tierney, M (2015).
OR
![Page 3: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/3.jpg)
3BUILD TOOLS - DISCIPLINE MEETING
What are they?
![Page 4: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/4.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 4
• Grunt• Gulp• Broccoli • NAnt• etc….
What are they?
![Page 5: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/5.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 5
• New projects - Gulp• Legacy projects - Grunt
Which do we use?
![Page 6: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/6.jpg)
6BUILD TOOLS - DISCIPLINE MEETING
GULP
![Page 7: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/7.jpg)
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?
![Page 8: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/8.jpg)
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
![Page 9: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/9.jpg)
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
![Page 10: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/10.jpg)
10BUILD TOOLS - DISCIPLINE MEETING
What are they for?
![Page 11: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/11.jpg)
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
![Page 12: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/12.jpg)
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
![Page 13: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/13.jpg)
13BUILD TOOLS - DISCIPLINE MEETING
gulpfile.js
![Page 14: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/14.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 14
![Page 15: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/15.jpg)
15BUILD TOOLS - DISCIPLINE MEETING
Why do we use them?
![Page 16: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/16.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 16
Having a standardised, shared setup speeds up work
![Page 17: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/17.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 17
Consistency across projects ♥
![Page 18: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/18.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 18
Takes away monotonous tasks
![Page 19: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/19.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 19
Avoids repetition
![Page 20: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/20.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 20
Takes away some human erorr
![Page 21: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/21.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 21
Avoids repetition
![Page 22: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/22.jpg)
03/05/2023BUILD TOOLS - DISCIPLINE MEETING 22
Gives everyone more confidence to pick up front end tasks
![Page 23: Build tools](https://reader035.vdocuments.mx/reader035/viewer/2022070523/58eca44d1a28abbe7e8b4581/html5/thumbnails/23.jpg)
Thanks.We will be running a build tools learning session for Grunt and Gulp.https://github.com/furzeface/build-tools-workshop/