我怎样才能让Grunt / Watch / LiveReload重新加载Sass / CSS而无需整页刷新？ [英] How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?

问题描述

到目前为止，我已经完成了所有我想要的工作（它监视我想要的所有文件并在发生变化时进行刷新），除了我希望能够对Sass / CSS进行修改以及让它在没有页面加载的情况下刷新浏览器。这不是什么大问题，但有时我会在页面交互之后尝试修改某些东西的样式，如果页面刷新，我必须重新执行整个过程。

我相当肯定这是可能的，但它迄今为止还没有出现。

这是我的 Gruntfile.js
pre $ module.exports = function（grunt）{

//项目配置。
grunt.initConfig（{
pkg：grunt.file.readJSON（'package.json'），
connect：{
server：{
options：{} ，
}
}，
sass：{
dist：{
options：{
style：'compressed'
}，
文件：{
'css / main.css'：'css / scss / main.scss'，
}
}
}，
jshint：{
档案：['js / *。js']，
}，
观看：{
选项：{
livereload：true，
}，
html：{
档案：['index.html']，
}，
js：{
档案：['js / ** / *。js ']，
tasks：['jshint']，
}，
css：{
files：['css / scss / ** / *。scss']，
任务：['sass']，
}，
}
}）;

//实际运行的东西。
grunt.loadNpmTasks（'grunt-contrib-sass'）;
grunt.loadNpmTasks（'grunt-contrib-watch'）;
grunt.loadNpmTasks（'grunt-contrib-connect'）;
grunt.loadNpmTasks（'grunt-contrib-jshint'）;

//默认任务。
grunt.registerTask（'default'，['connect'，'watch']）;

};


我想提一下关于我的设置的一件奇怪事情：当我运行 grunt watch --verbose 我看到它监视 .git 以及 .sass-cache 。这看起来合适吗？我不知道我做了什么来做到这一点。

 监视.git以进行更改。 
观看.sass-cache以进行更改。 
  

解决方案

问题的第一部分非常直截了当。实时重新载入只会重新载入您在配置中指定的文件;即如果你指定了sass文件，那就是那些重新加载的文件。我在我的设置中解决了这个问题，让Grunt在我的dist目录中观看css文件，每次重新编译Sass时都会明显改变。

  options：{
 livereload：true，
}，
 html：{
 files：['index.html']，
 $ b $ {
 files：['js / ** / *。js']，
 tasks：['jshint']，
}，
 sass：{
 options：{
 livereload：false 
}，
 files：['css / scss / ** / *。scss']，
任务：['sass']，
}，
 css：{
 files：['dist / css / master.css']，
 tasks：[] 
} 
} 
  

我不确定第二个问题。它不会在任何项目的 grunt watch --verbose 中显示这些目录，然后我再也不会详细运行该命令。

So far, I've gotten everything working how I want (which is monitoring all the files I want and refreshing whenever there is a change), other than I'd love to be able to make modifications to Sass/CSS and have it refresh in the browser without a page load. It's not a huge deal, but sometimes I'm trying to modify the style of something after there's been some page interaction and I have to go through the process all over again if the page refreshes.

I'm fairly certain this is possible, but it eludes me so far.

Here's my Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      css: {
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
    }
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Default task(s).
  grunt.registerTask('default', ['connect', 'watch']);

};

One odd thing I wanted to mention about my setup: when I run grunt watch --verbose I see that it's monitoring .git as well as .sass-cache. Does that seem right? I don't know what I did to make it do that.

Watching .git for changes.
Watching .sass-cache for changes.

解决方案

The first part of your question is straightforward enough. Live reload only reloads the files you specify in the configuration; i.e if you specify sass files it is those that are reloaded. I fixed this in my setup by having Grunt watch the css file in my dist directory, which obviously gets changed every time the Sass is recompiled.

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['index.html'],
  },
  js: {
    files: ['js/**/*.js'],
    tasks: ['jshint'],
  },
  sass: {
    options: {
      livereload: false
    },
    files: ['css/scss/**/*.scss'],
    tasks: ['sass'],
  },
  css: {
    files: ['dist/css/master.css'],
    tasks: []
  }
}

I'm not sure about the second question. It doesn't show those directories in my grunt watch --verbose for any project, then again I never run that command verbosely.

这篇关于我怎样才能让Grunt / Watch / LiveReload重新加载Sass / CSS而无需整页刷新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！