AngularJS Grunt livereload

Leikkiessäni AngularJS:llä ja Gruntilla tuli tarpeelliseksi pohtia nopeampaa workflowta editointiin kuin raskas Maven build joka kerta kun Javascript komennon puolipistettä viilaa. Grunt tarjoaa tähän montakin tapaa, mutta löysin artikkelin jossa oli mainittu toimivaa tavaraa.

Ensin ladataan package.json tiedostossa npm:n toimesta kaikki tarvittavat moduulit, esim. tähän tapaan:

{
 "name": "MyProject",
 "version": "0.0.0",
 "devDependencies": {
 "grunt": "latest",
 "matchdep": "latest",
 "grunt-contrib-clean": "latest",
 "grunt-contrib-watch": "latest",
 "grunt-open": "latest",
 "grunt-express": "latest",

… jne

Sitten mennään gruntfile.js puolelle, ja tehdään vähän taikuutta: ladataan kaikki grunt- alkuiset kirjastot:

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

Ja nyt voidaan grunttailla watch, open ja express moduulien kanssa. Esim. näin:

var path = require('path')
 module.exports = function (grunt) {
 grunt.initConfig({
 express: {
 all: {
 options: {
 port: 9000,
 hostname: "0.0.0.0",
 bases: [ path.resolve('.') ],
 livereload: true
 }
 }
 },
 watch: {
 static: {
 files: ['index.html'],
 options: {
 livereload: true,
 }
 },
 js: {
 files: ['app/*.js'],
 //tasks: ['concat:js', 'uglify:js'],
 options: {
 livereload: true,
 }
 },
 css: {
 files: ['content/*.less'],
 // tasks: ['less:style'],
 options: {
 livereload: true,
 }
 }
 },
 open: {
 all: {
 path: 'http://localhost:<%= express.all.options.port%>'
 }
 }
 //... etc
 })

Ja lopuksi mukava pikku server task:

// Creates the `server` task
 grunt.registerTask('server', [
 'express',
 'open',
 'watch'
 ]);

Kaikki nipussa: nyt voi sanoa: grunt server, ja grunt potkaisee käyntiin porttiin 9000 pikku serverin joka jakelee prosessoimattomat sivut, scriptit ja muut suoraan käyttöön, avaa selaimen, ja vahtii muutoksia filuihin. Kun tiedostot muuttuvat, nimensä mukaisesti livereload lataa ne uudestaan.

Mikä on kuitenkin metkointa on ylläolevan esimerkin tasks-parametrit: muutoksen yhteydessä voidaan ajaa haluttuja prosessointeja raa’alle lähdekoodille samantien.

Hauskaa! 😉

 

Lähde kokeiluihin:

http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s