可能有grunt编译较少和实时重新加载没有一个完整的页面重新加载

Question

我有一个使用LESS的Angular JS项目，正在使用grunt通过grunt serve编译和显示我的页面。但是，每次保存/编译LESS文件后，页面都会重新加载更改。如果我更改了页面上对象的状态，并进行了LESS编辑，页面重载会重新设置页面状态，我需要再次进行所有更改，看看我的CSS修复是否足够。

有没有一种方法可以在编译LESS文件、重新加载CSS而不加载整个HTML页面的情况下对此进行配置？

这是我的Grunt.js:的连接部分

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    //hostname: 'localhost',
    hostname: '0.0.0.0',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ]
    }
  },
  test: {
    options: {
      port: 9001,
      base: [
        '.tmp',
        'test',
        '<%= yeoman.app %>'
      ]
    }
  },
  dist: {
    options: {
      base: '<%= yeoman.dist %>'
    }
  }
},

较少部分：

    //LESS
less: {
  theme: {
    options: {
      sourceMap: true,
      sourceMapFilename: '.tmp/dist/css/theme.css.map',
      sourceMapURL: 'theme.css.map',
      outputSourceFiles: true
    },
    files: [{
      ".tmp/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
    }]
  },
  preview: {
    options: {
      sourceMap: true,
      sourceMapFilename: '.tmp/live_preview/styles/main.css.map',
      sourceMapURL: 'main.css.map',
      outputSourceFiles: true
    },
    files: [{
      ".tmp/live_preview/styles/main.css": "<%= yeoman.preview %>/less/main.less"
    }]
  },
  distTheme: {
    options: {
      compress: true,
      yuicompress: true,
      optimization: 2,
      sourceMap: true,
      sourceMapFilename: '<%= yeoman.dist %>/dist/css/theme.css.map',
      sourceMapURL: 'theme.css.map',
      outputSourceFiles: true
    },
    files: [{
      "<%= yeoman.dist %>/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
    }]
  }
},

Answer 1

诀窍是只在生成的CSS上触发livereload，而不是在较少的文件上，否则会重新加载页面。

这种手表配置对我来说很有用：

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['app/index.html', 'app/views/*.html', 'app/views/*/*.html'],
  },
  js: {
    files: ['app/scripts/*.js', 'app/scripts/*/*.js']
  },
  less: {
    files: ['app/styles/less/*.less'],
    tasks: ['less'],
    options: {
      livereload: false
    }
  },
  css: {
    files: ['app/styles/*.css'],
  }
}

Answer 2

据我所知，如果观察者通知它触发的更改以在浏览器中重新加载相关资源，但如果没有相关资源，它会触发完全重新加载。

因此，如果浏览器中没有加载更改，则会触发完全重新加载。

而.less文件并没有加载到浏览器中，只加载生成的css。

我认为添加一些类似于你的观察者配置的东西来禁用对.less文件的观察就足够了：

  base: [
    '.tmp',
    '<%= yeoman.app %>',
    '!...yourlessfile.less'
  ]