Grunt och gulp
-
Upload
lars-gunther -
Category
Software
-
view
324 -
download
1
Transcript of Grunt och gulp
![Page 1: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/1.jpg)
GruntAUTOMATISERAT ARBETSFLÖDE FÖR WEBBUTVECKLARE
![Page 2: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/2.jpg)
Vad gör Grunt och Gulp?
Allt du ber dem om… Automatisk kvalitetskontroll av din kod CSS-prefixhantering Minifiering Etc.
![Page 3: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/3.jpg)
Teknikträdet
V8 Node (npm)
GruntPostCSS
AutoprefixerCSSNano (minifiering)
WatchAndra hjälpmoduler
![Page 4: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/4.jpg)
Installera Node.js
![Page 5: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/5.jpg)
Installera grunt-cli globalt
![Page 6: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/6.jpg)
Initiera node med npm init
![Page 7: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/7.jpg)
Detta skapar package.json
![Page 8: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/8.jpg)
Installera grunt lokalt
![Page 9: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/9.jpg)
Grunt hamnar i node-modules
Se till att denna katalog inte tas med av git
![Page 10: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/10.jpg)
Node hanterar sina egna beroenden
![Page 11: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/11.jpg)
Skapa en Gruntfile.js
![Page 12: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/12.jpg)
Parametrar
![Page 13: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/13.jpg)
Varningar
![Page 14: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/14.jpg)
Testkör
![Page 15: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/15.jpg)
Chaining tasks
![Page 16: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/16.jpg)
Default task
![Page 17: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/17.jpg)
Grunt --help
![Page 18: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/18.jpg)
Autoprefixer
https://github.com/postcss/autoprefixer Hantera alla nödvändiga CSS-prefix Tar bort onödiga prefix
![Page 19: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/19.jpg)
Installation
![Page 20: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/20.jpg)
Kod
![Page 21: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/21.jpg)
Gruntfile.jsNästan direkt från manualen.
![Page 22: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/22.jpg)
Kör Grunt
![Page 23: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/23.jpg)
Ta bort onödiga prefix
![Page 24: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/24.jpg)
Kontrollera elevernas arbeten med en diff
![Page 25: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/25.jpg)
Skriv inte över originalet
![Page 26: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/26.jpg)
Lite snyggare lösning
![Page 27: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/27.jpg)
Kör kontinuerlig med Grunt-watch
![Page 28: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/28.jpg)
Gruntfile.js
![Page 29: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/29.jpg)
Lägg på minifiering
![Page 30: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/30.jpg)
GulpETT ALTERNATIV TILL GRUNT
![Page 31: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/31.jpg)
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
![Page 32: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/32.jpg)
Grunts fördelar
Mer mogen produktStörre community
Större mängd artiklar, böcker, etcStörre mängd modulerFler som kan hjälpa, exempelvis på StackOverflow
”Good enough”
![Page 33: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/33.jpg)
Autoprefixer i Gulp
![Page 34: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/34.jpg)
(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
![Page 35: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/35.jpg)
Installera gulp
[I en ny katalog]npm initnpm install –g gulp eslintnpm install --save-dev gulp gulp-util gulp-eslint
![Page 36: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/36.jpg)
Gulps huvudfunktioner
Definiera task medgulp.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])
![Page 37: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/37.jpg)
ESLintKONTROLL AV KODKVALITET I ECMASCRIPT
![Page 38: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/38.jpg)
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
![Page 39: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/39.jpg)
ESLint och Node
Skriven för Node! Stand-alone Modul
Grunt Gulp Etc
Mängder av olika kodstander att ladda ner
![Page 40: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/40.jpg)
Skapa .eslintrc
Grundläggande reglereslint --initStrular på Windows
![Page 41: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/41.jpg)
.eslintrc
![Page 42: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/42.jpg)
gulpfile.js
![Page 43: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/43.jpg)
PhpCodeSnifferLINTNING FÖR PHP
![Page 44: Grunt och gulp](https://reader036.fdocument.pub/reader036/viewer/2022062316/58efd9ac1a28ab94768b4569/html5/thumbnails/44.jpg)
VagrantFLYTTBARA VIRTUELLA MASKINER