Question

这是我第一次构建Gruntfile.js并且一切正常但是重新加载，我一直在执行任务...当我将 livereload：true，添加到监视选项时出错了我错过了什么或者我做错了什么？

我在这里查看了https://github.com/gruntjs/grunt-contrib-watch#optionslivereload并按照指南说明了将livereload添加到选项并将其设置为true。

module.exports = function(grunt) {
// configure the tasks
grunt.initConfig({

//Build task
copy: {
  build: {
    cwd: 'source',
    src: [ '**', '!**/*.less', '!**/*.coffee', '!**/*.jade' ],
    dest: 'build',
    expand: true
  },
},

// Clean task
clean: {
  build: {
    src: [ 'build' ]
  },
  stylesheets: {
      src: [ 'build/**/*.css', '!build/application.css' ]
  },
  scripts: {
    src: [ 'build/**/*.js', '!build/application.js' ]
  },
},

// Less task
less: {
  build: {
    options: {
      linenos: true,
      compress: false
    },
    files: [{
      expand: true,
      cwd: 'source',
      src: [ '**/*.less' ],
      dest: 'build',
      ext: '.css'
    }]
  }
},

// Autoprefixer task
autoprefixer: {
  build: {
    expand: true,
    cwd: 'build',
    src: [ '**/*.css' ],
    dest: 'build'
  }
},

// CSS Minify task
cssmin: {
  build: {
    files: {
      'build/application.css': [ 'build/**/*.css' ]
    }
  }
},

// Coffee task
coffee: {
  build: {
    expand: true,
    cwd: 'source',
    src: [ '**/*.coffee' ],
    dest: 'build',
    ext: '.js'
  }
},


// Uglify
uglify: {
  build: {
    options: {
      mangle: false
    },
    files: {
      'build/application.js': [ 'build/**/*.js' ]
    }
  }
},

// Html task
jade: {
  compile: {
    options: {
      data: {}
    },
    files: [{
      expand: true,
      cwd: 'source',
      src: [ '**/*.jade' ],
      dest: 'build',
      ext: '.html'
    }]
  }
},


// Watch task
watch: {
  stylesheets: {
    files: 'source/**/*.less',
    tasks: [ 'stylesheets' ]
  },
  scripts: {
    files: 'source/**/*.coffee',
    tasks: [ 'scripts' ]
  },
  jade: {
    files: 'source/**/*.jade',
    tasks: [ 'jade' ]
  },
  copy: {
    files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
    tasks: [ 'copy' ]
  }
},

// Connect to server task
connect: {
  server: {
    options: {
      port: 4000,
      base: 'build',
      hostname: '*'
      livereload: true,
    }
  }
}

});


// load the tasks
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

// builds and cleans the task
grunt.registerTask(
  'build',
  'Compiles all of the assets and copies the files to the build directory.',
  [ 'clean:build', 'copy', 'stylesheets', 'scripts', 'jade' ]
);

// Adds stylesheet to the task
grunt.registerTask(
  'stylesheets',
  'Compiles the stylesheets.',
  [ 'less', 'autoprefixer', 'cssmin', 'clean:stylesheets' ]
);
  // Adds javascript to the task
  grunt.registerTask(
    'scripts',
    'Compiles the JavaScript files.',
    [ 'coffee', 'uglify', 'clean:scripts' ]
  );

  //watches and connects to the server
  grunt.registerTask(
    'default',
    'Watches the project for changes, automatically builds them and runs a server.',
    [ 'build', 'connect', 'watch']
  );
};

Answer 1

您需要将该选项添加到监视任务的配置中。目前，您在连接任务中有设置而不是监视任务。尝试这样的事情：

watch: {
  options: {
    livereload:true,
  },
  stylesheets: {
    files: 'source/**/*.less',
    tasks: [ 'stylesheets' ]
  },
  scripts: {
    files: 'source/**/*.coffee',
    tasks: [ 'scripts' ]
  },
  jade: {
    files: 'source/**/*.jade',
    tasks: [ 'jade' ]
  },
  copy: {
    files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
    tasks: [ 'copy' ]
  }
},

您还需要将其从连接任务中删除

无法在gruntfile.js中使用livereload

1 个答案: