grunt-contrib-connect与grunt-contrib-watch和Chrome LiveReload Extension

时间:2014-01-02 13:08:59

标签: gruntjs livereload grunt-contrib-watch grunt-contrib-connect

您好我想知道是否可以从Gruntfile.js自动启用Chrome LiveReload Extension。我的意思是,一旦用grunt-open打开页面并且没有在html文件中添加livereload脚本,就不会点击工具栏中的LR Extension图标。

我的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'
  ]);
};

0 个答案:

没有答案