Grunt.Js En introduksjon

Transkript

1 Foiler for Kollokvium Avd. Virksomhetsutvikling Gr. Systemutvikling Grunt.Js En introduksjon Forfatter: Tore Aurstad Dato: lørdag, 15. februar

2 2 Grunt.Js Disse slidene vil forklare mye rundt oppsettet av Grunt.Js som utviklere som skal rigge opp Grunt.js trenger å kunne Andre utviklere trenger primært å installere node.js og kjøre kommandoen npm init for å sjekke at man henter ned node_modules som kreves, hvis disse mangler. Evt. kan man sjekke inn både Grunt.Js filene og modulene s.a. det kun er nødvendig å installere node.js, grunt-cli og grunt på den lokale utviklingsmaskinen. Grunt.Js har mange plugins og for Hemit kan det inngå i webutvikling for å automatisere en del oppgaver, for mer effektiv utvikling, ved at man kan gjøre en del vedlikeholdsoppgaver automatisk. Grunt.Js gjør det også enklere å lage websider med teknologi som Jade og less, ved at man kan sette opp automatisk parsing og kompilering.

3 3 Hva er Grunt.Js? Laget for å effektivisere og automatisere ulike oppgaver i moderne webutvikling Grunt.Js er primært en task runner som kan kjøre oppgaver som inngår i webutvikling Grunt.Js krever at node.js er installert på utviklerens PC og bygger på både node.js og node package manager eller npm Det finnes flere plugins som man kan sette opp ulike tasker i med Grunt, som for eksempel minifisering av javascript filer, mfl. Lisensen er MIT og kildekode kan klones fra Github Det er mulig å lage egne plugins og all konfigurering av oppgaver som skal kjøres i Grunt.Js skrives i Javascript

4 4 Hva er node.js Ikke tema for denne gjennomgangen, men node.js sin node package manager brukes når man installerer både Grunt.js og Grunt sine plugins Bygget på Google Chrome sin V8 Engine for å kjøre Javascript Mer informasjon på nodejs.org

5 5 Komme i gang med Grunt.Js Man må først hente ned node.js, siden Grunt.Js bygger på node.js og bruker npm Node.js kan hentes herfra: Last ned MSI pakke fra forsiden og installer node.js Gå til en kommandolinje (startknapp, kjør: CMD) og til en mappe du ønsker å starte å teste ut Grunt.Js Installer først grunt-cli, som er grunt sin command line interface med kommandoen: npm install g grunt-cli

6 6 Installere Grunt Nå er kommandoen grunt installert, med grunt-cli, men man må nå sette opp grunt for den lokale mappen (prosjektet) man står i og alle undermapper. Først må en lokal installasjon av grunt installeres i prosjektet man står i. Dette vil legges i mappen node_modules og denne kjernemodulen tar ca 5 MB npm install grunt

7 7 Forenklet oppsett av Grunt i ulike prosjekter Det er to sentrale filer i oppsettet av Grunt i hvert prosjekt: GruntFile.js og package.json Man kan sette opp et skall av disse to filene med grunt-init, som er et scaffolding verktøy for å sette opp Grunt. Installer grunt-init globalt: npm install g grunt-init Gå til mappen: %USERPROFILE% og opprett mappen.grunt-init (punktum foran) Gå inn i denne mappen og kjør kommandoen, Git er tilgjengelig forresten her: git clone Flere scaffolding prosjekter er tilgjengelig her:

8 Generering av oppsett for Grunt.js 8 Gå tilbake til mappen hvor prosjektet ditt er og kjør kommandoen: grunt-init gruntfile

9 9 Genering fra grunt-init Bemerk at det genererte oppsettet med grunt-init gruntfile setter opp en del moduler man kanskje ikke ønsker å bruke. Etterhvert som man blir kjent med GruntJs så vil man fjerne det man ikke trenger fra de genererte filene, men for en introduksjon er det kjekt å få et testoppsett man kan justere litt og begynne å se sammenhenger og hvilke grunt plugins som er tilgjengelig. Vi må justere de genererte filene litt først.

10 10 Package.json filen Man må i tillegg justere den genererte Package.json filen slik at kommandoen npm install kan kjøres. Feltene name, description, readme, title, author, homepage, version og repository måtte legges til ut fra det som ble generert.package.json er en fil skrevet med Json format som styrer hvilke pakker eller plugins man skal hente ned via npm. Bemerk hvilke moduler som er spesifisert under. Disse installereres etterpå med med kommandoen npm install og legges i node_modules. Denne økte fra 5 MB til 20 MB. { "name": "GruntJsTestRun", "title": "GjTr", "author": "Tore Aurstad", "homepage": " "version": "0.1.0", "description": "A test of Grunt.js", "engines": { "node": ">= " }, "readme": "", "repository": "", "devdependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.8.0", "gruntcontrib-watch": "~0.5.3", "grunt-contrib-qunit": "~0.4.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.3.2" } }

11 11 Installere plugins manuelt Hvis man ønsker å legge til enda et plugin, kan man bruke npm og grunt-cli til dette. For å installere f.eks grunt-contrib-jshint kan man skrive: npm install grunt-contrib-jshint --save-dev Man må også huske på å legge til en loading av dette pluginet i GruntFile.js grunt.loadnpmtasks('grunt-contrib-jshint'); Per dags dato er det 2250 plugins tilgjengelig på følgende side:

12 12 GruntFile.js filen Package.json filen inneholder metainformasjon om prosjektet og hvilke moduler som skal lastes ned spesifisert devdepencies. GruntFile.js setter opp de ulike modulene eller pluginene og loader Npm moduler og registrerer tasker, som kan kjøres fra kommandolinjen via grunt kommandoen etterfulgt av navnet på tasken. Default tasken er den som vil kjøres med kommandoen grunt, hvis den er spesifisert Man skriver alt inne i denne filen med Javascript. Det går an å kombinere tasker. Det er selvsagt mulig å integrere dette i build scripts og da må byggeserver også ha installert node.js og grunt.js og nødvendige moduler. Dette gjør det mulig å preparere et prosjekt (webside) men kompilert javascript, css og så videre.

13 Struktur i Grunt.js filen module.exports = function(grunt) { 13 // Project configuration. grunt.initconfig({ // Metadata. pkg: grunt.file.readjson('package.json'), banner: '/*! <%= pkg.title pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripbanners: true }, dist: { src: ['lib/<%= pkg.name %>.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/<%= pkg.name %>.min.js' } } }); // These plugins provide necessary tasks. grunt.loadnpmtasks('grunt-contrib-concat'); grunt.loadnpmtasks('grunt-contrib-uglify'); grunt.loadnpmtasks('grunt-contrib-qunit'); grunt.loadnpmtasks('grunt-contrib-jshint'); grunt.loadnpmtasks('grunt-contrib-watch'); // Default task. grunt.registertask('default', ['jshint', 'qunit', 'concat', 'uglify']); All kode for å sette opp Grunt.js blir wrappet i en funksjon og grunt.initconfig metoden setter opp de ulike taskene. Det er mulig å definere egne tasker og også konfigurere plugins man loader. Etter konfigureringen loader man Npm taskene, som er plugins og registrerer tasker som kan kjøres fra kommandolinjen. Bemerk at det er mulig å kombinere flere tasker til en enkelt task. Bemerk loadingen av package.json filen

14 14 Kjøring av Grunt.Js tasker Ved å unnlate navnet på en task, så vil man kjøre en task som heter default, som altså må være definert i GruntFile.js Skriver man grunt på kommandolinjen er det denne tasken som kjøres Kjører man en annen task, skriver man grunt etterfulgt av navnet på den tasken, feks grunt uglify for å minifisere javscript fil(er) Bemerk at rekkefølgen som er skrevet i en task vil avgjøre rekkefølgen en kombinert task vil kjøre med Vil man tvinge igjennom neste kjøring av neste subtask, kan man legge til følgende flagg i kommandoen man utfører: --force I starten bør man tvinge igjennom neste subtask for å utforske Grunt, men ved bygging bør man vurdere om en feil i en subtask bør føre til at neste sted ikke blir utført

15 15 Force neste task Neste subtask kan kjøres med--force flagget

16 16 Legge til nytt plugin Et nytt plugin kan legges til fra kommandolinjen. Eksempelvis htmlhint for å sjekke at html filer har gyldig innhold: npm install grunt-htmlhint --save-dev Dette legger til htmlhint som plugin i mappen node_modules og legger også til htmlhint i devdependencies i package.json filen

17 17 Oppdatert package.json fil { "name": "GruntJsTestRun", "title": "GjTr", "author": "Tore Aurstad", "homepage": " "version": "0.1.0", "description": "A test of Grunt.js", "engines": { "node": ">= " }, "readme": "", "repository": "", "devdependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.8.0", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-qunit": "~0.4.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.3.2", "grunt-htmlhint": "~0.4.0" }}

18 18 Legge til konfigurering av htmlhint task i GruntFile.js Konfigurering av htmlhint gjøres i GruntFile.js Legger til konfigurering / task-definisjon i GruntFile.js, bemerk tag-pair her satt til true som vil testes: Bruk følgende url for å søke etter dokumentasjon av plugins: for dette pluginet: htmlhint: { build: { options: { 'tag-pair': true, 'tagname-lowercase': true, 'attr-lowercase': true, 'attr-value-double-quotes': true, 'doctype-first': true, 'spec-char-escape': true, 'id-unique': true, 'head-script-disabled': true, 'style-disabled': true }, src: ['lib/**/*.html'] }

19 19 Teste ut html hint pluginet: Det er nødvendig også å loade pluginet i GruntFile.js filen: grunt.loadnpmtasks('grunt-htmlhint'); Legg til en html fil der man har definert denne regelen skal gjelde, i dette eksempelet alle filer som har extension.html i alle undermapper til lib mappen der man tester dette. src: ['lib/**/*.html']

20 20 Kjøring av htmlhint pluginet: Jånni Noobesen lærer seg Html og bruker Grunt.js til å sjekke at Html-en hans er riktig Htmlhint peker først på at ikke alle tags er lowercase. Etter andre redigering har Jånni innført en ny feil - ikke well-formed HTML Til slutt ender vedkommende opp med gyldig HTML og man får meldingen Done, without errors. Tasken ble kjørt med kommando: grunt htmlhint

21 21 Hvordan passer Grunt.Js inn i Hemit? Dette er selvsagt primært teknologi som vil hjelpe webutviklere, enten til hjelp i utviklingsoppgaver, kompilering og bygging av webapplikasjoner Grunt.Js kan automatisere en del oppgaver og også gi raskere nettsider ved å gjøre det enklere å minifisere javascript, slå sammen CSS-filer, samt validere html Grunt.Js kan i tillegg la en utviklere jobbe med rammeverk som Jade og Less, hvor det ofte er kompileringssteg til et videre format på en grei måte Det er 2215 plugins pr dags dato og det er svært mange måter Grunt.Js kan hjelpe utviklere til å bygge bedre webaplikasjoner raskere. Akkurat som jquery, tilbyr Grunt.Js mao. et økosystem av ulike plugins med fokus på automatisert bygging og generering, med fokus på filgenering og optimering, samt overvåking av filer via Grunt.Js sitt watch plugin ikke gått igjennom her.

22 22 Laste ned eksempelkode i denne gjennomgangen Det er primært demokode, men for de som vil teste ut, kan de installere node.js, grunt-cli og hente ned en kopi av demokoden herfra: