1

Hi I was wondering if it's possible to automatically enable Chrome LiveReload Extension from Gruntfile.js. By that I mean no clicking on the LR Extension icon in the toolbar once the page opened with grunt-open and no adding a livereload script in the html file.

my package.json

{
  "name": "dummy-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "matchdep": "~0.3.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-compass": "~0.7.0",
    "grunt-open": "~0.2.2",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-jshint": "~0.8.0"
  }
}

my Gruntfile.js

module.exports = function(grunt) {

  // Load Grunt tasks declared in the package.json file
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({

    connect: {
      all: {
        port: 8000,
        protocol: 'http',
        hostname: 'localhost',
        base: '.',
        directory: null,
        keepalive: false,
        debug: false,
        livereload: true,
        open: true,
      },
    },

    compass: {
      dist: {
        options: {
          require: 'susy',
          sassDir: 'scss',
          cssDir: 'css',
          imagesDir: 'img',
          environment: 'production'
        }
      },
    },

    // grunt-watch will monitor the projects files
    watch: {
      gruntfile: {
        files: 'Gruntfile.js',
        tasks: ['jshint:gruntfile'],
      },
      sass: {
        files: ['scss/**/*.{scss,sass}'],
        tasks: ['compass']
      },
      css: {
        files: ['css/*.css'],
        options: {
          livereload: true,
        }
      },
      html: {
        files: ['**/*.html'],
        options: {
          livereload: true,
        }
      }
    },

    jshint: {
      gruntfile: {
        src: ['Gruntfile.js']
      }
    },

    open: {
      all: {
        // Gets the port from the connect configuration
        path: 'http://localhost:<%= connect.all.options.port%>'
      }
    },

  });

  grunt.registerTask('default', [
    'connect',
    'open',
    'watch'
  ]);
};
eugene.kud
  • 19
  • 4
  • 1
    Why not use the [`livereload` option](https://github.com/gruntjs/grunt-contrib-watch#optionslivereload) of the `watch` task instead? – Jordan Kasper Jan 02 '14 at 14:30
  • Do you mean like watch:{options:{livereload:true},}? – eugene.kud Jan 02 '14 at 14:58
  • Well, it looks like you need to specify the port you are using, so: `options: { livereload: 8000 }`. Anyway, I'm just wondering why you need the Chrome extension versus this option? Or do you? – Jordan Kasper Jan 02 '14 at 15:00
  • Well, as far as I understood you can't have an automatic page refresh without the Chrome extension... Is that right? I mean I put livereload :true and all but as long as I don't click on "enable livereload" I can't see any changes. – eugene.kud Jan 02 '14 at 18:01
  • You do not need the extension necessarily. Check out [this section in the `watch` documentation](https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html). – Jordan Kasper Jan 02 '14 at 18:52
  • FYI, the reason to use this over the extension is that other developers working on the project can use any browser they want. Also, if you're testing in multiple browsers you don't have to worry about it. – Jordan Kasper Jan 02 '14 at 18:52
  • Thank you so much! Everything works! – eugene.kud Jan 03 '14 at 21:26
  • 4
    Glad to hear it... maybe write an answer with how you solved your issue (and then accept it) ;) – Jordan Kasper Jan 03 '14 at 21:53

0 Answers0