GruntAUTOMATISERAT ARBETSFLÖDE FÖR WEBBUTVECKLARE

Vad gör Grunt och Gulp?

Allt du ber dem om… Automatisk kvalitetskontroll av din kod CSS-prefixhantering Minifiering Etc.

Teknikträdet

V8 Node (npm)

GruntPostCSS

AutoprefixerCSSNano (minifiering)

WatchAndra hjälpmoduler

Installera Node.js

Installera grunt-cli globalt

Initiera node med npm init

Detta skapar package.json

Installera grunt lokalt

Grunt hamnar i node-modules

Se till att denna katalog inte tas med av git

Node hanterar sina egna beroenden

Skapa en Gruntfile.js

Parametrar

Varningar

Testkör

Chaining tasks

Default task

Grunt --help

Autoprefixer

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

Installation

Kod

Gruntfile.jsNästan direkt från manualen.

Kör Grunt

Ta bort onödiga prefix

Kontrollera elevernas arbeten med en diff

Skriv inte över originalet

Lite snyggare lösning

Kör kontinuerlig med Grunt-watch

Gruntfile.js

Lägg på minifiering

GulpETT ALTERNATIV TILL GRUNT

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

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”

Autoprefixer i Gulp

(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

Installera gulp

[I en ny katalog]npm initnpm install –g gulp eslintnpm install --save-dev gulp gulp-util gulp-eslint

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])

ESLintKONTROLL AV KODKVALITET I ECMASCRIPT

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

ESLint och Node

Skriven för Node! Stand-alone Modul

Grunt Gulp Etc

Mängder av olika kodstander att ladda ner

Skapa .eslintrc

Grundläggande reglereslint --initStrular på Windows

.eslintrc

gulpfile.js

PhpCodeSnifferLINTNING FÖR PHP

VagrantFLYTTBARA VIRTUELLA MASKINER