如何在没有刷新整个页面的情况下使Grunt / Watch / LiveReload重新加载Sass / CSS?

JavaScript CSS

Gil番长Stafan

2020-03-23

到目前为止,除我希望能够对Sass / CSS进行修改并使其刷新之外,我已经使所有事情都能按我想要的方式进行(即监视我想要的所有文件并在发生更改时刷新)。在没有页面加载的浏览器中。这没什么大不了的,但是有时候在页面交互之后,我试图修改某些东西的样式,如果页面刷新,我必须重新进行整个过程。

我相当确定这是可能的,但到目前为止,这还没有使我明白。

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

};

我想提及有关设置的一件奇怪的事情:运行时,grunt watch --verbose我看到它.git也在监视.sass-cache看起来对吗?我不知道该怎么做。

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

第2595篇《如何在没有刷新整个页面的情况下使Grunt / Watch / LiveReload重新加载Sass / CSS?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android