Utbildning i verktyg för webbutveckling. Baldersskolan, Skellefteå, 2015-10-26.

1. Grunt
AUTOMATISERAT ARBETSFLÖDE FÖR WEBBUTVECKLARE

2. Vad gör Grunt och Gulp?
 Allt du ber dem om…
 Automatisk kvalitetskontroll av din kod
 CSS-prefixhantering
 Minifiering
 Etc.

3. Teknikträdet
 V8
 Node (npm)
Grunt
PostCSS
Autoprefixer
CSSNano (minifiering)
Watch
Andra hjälpmoduler

4. Installera Node.js

5. Installera grunt-cli globalt

6. Initiera node med npm init

7. Detta skapar package.json

8. Installera grunt lokalt

9. Grunt hamnar i node-modules
 Se till att denna katalog inte tas med av git

10. Node hanterar sina egna
beroenden

11. Skapa en Gruntfile.js

12. Parametrar

13. Varningar

14. Testkör

15. Chaining tasks

16. Default task

17. Grunt --help

18. Autoprefixer
 https://github.com/postcss/autoprefixer
 Hantera alla nödvändiga CSS-prefix
 Tar bort onödiga prefix

19. Installation

20. Kod

21. Gruntfile.js
Nästan direkt
från manualen.

22. Kör Grunt

23. Ta bort onödiga prefix

24. Kontrollera elevernas arbeten med
en diff

25. Skriv inte över originalet

26. Lite snyggare lösning

27. Kör kontinuerlig med Grunt-watch

28. Gruntfile.js

29. Lägg på minifiering

30. Gulp
ETT ALTERNATIV TILL GRUNT

31. Gulps fördelar
 Buffer files och streams i stället för tasks
 Grunt öppnar en fil – ändrar den – sparar
 Gulps förebild: Pipe + filter i *nix
 Locate ”*.php” | grep ”mysystem” | awk <####>
 Du känner också igen dig från JQuery
 Snabbare
 Mindre konfigurering

32. Grunts fördelar
 Mer mogen produkt
 Större community
Större mängd artiklar, böcker, etc
Större mängd moduler
Fler som kan hjälpa, exempelvis på StackOverflow
 ”Good enough”

33. Autoprefixer i Gulp

34. (Vad är en sourcemap?)
 Koppling mellan den färdiga CSS-filen och en
CSS Preprocessor (SASS, Less, SCSS)
 Koppling mellan originalfilen och det
transpilerade resultatet
 CoffeScript  transpilering  JavaScript

35. Installera gulp
[I en ny katalog]
npm init
npm install –g gulp eslint
npm install --save-dev gulp gulp-util gulp-eslint

36. Gulps huvudfunktioner
 Definiera task med
gulp.task(’name’, [ ’array’, ’of’, ’names’ ], function() {
// Gör något
});
 Starta med gulp.src()
gulp.src(globs, [,options])
 Skicka vidare med gulp.pipe(fn)
 Spara med gulp.dest(’path’)
 Bevaka med gulp.watch(glob [,opts, callback])

37. ESLint
KONTROLL AV KODKVALITET I ECMASCRIPT

38. Lintning i JavaScript
 JSLint av Douglas Crockford
 Pionjären på området
 ”The good parts”
 Hans personliga smak färgade allt
 JSHint
 Fork från JSHint
 Fler preferenser
 ESLint
 Flexiblare, kraftfullare
 Modulär
 ES 6

39. ESLint och Node
 Skriven för Node!
 Stand-alone
 Modul
 Grunt
 Gulp
 Etc
 Mängder av olika kodstander att ladda ner

40. Skapa .eslintrc
 Grundläggande regler
 eslint --init
 Strular på Windows

41. .eslintrc

42. gulpfile.js

43. PhpCodeSniffer
LINTNING FÖR PHP

44. Vagrant
FLYTTBARA VIRTUELLA MASKINER