jueves, mayo 14, 2015

Simple uso de Grunt (JavaScript Task Runner)



Pues bien esta vez me di a la tarea de investigar un poco sobre Grunt, si claro ese ya famoso gestor de tareas de javascript y pues bien, la verdad es que me agrado mucho. No entre muy afondo en la investigación sobre Grunt ,pero  me detuve y me llamo la atención  la característica de hacer el livereload cuando estamos desarrollando frontend, eso si me gusto mucho, por lo que me di a la tarea de hacer un pequeño ejemplo de cuales son esos módulos que sirven para trabajar con livereload.



Yo utilice los siguientes modulos:

   grunt-contrib-connect
   grunt-contrib-watch

para hacer el ejemplo utilice bootstrap y mas o menos quedo asi la configuración del Gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({

    connect: {
      server: {
        options: {
          port: 9000,
          base: 'public/'
        }
      }
    },
    watch: {
      project: {
        files: ['public/**/*.js', 'public/**/*.html', 'public/**/*.json', 'public/**/*.css'],
        options: {
          livereload: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['connect', 'watch']);


};


El ejemplo completo lo dejo aqui  para que puedar hacer el test, a por cierto para hacer el livereload utilice una extensión de chrome LiveReload 2.1.0

Descarga el proyecto aqui por si no viste el texto "dejo aqui"

Aca el video.....(Trabajando en el video)


No hay comentarios.:

Publicar un comentario