可以减少 grunt 编译并在不重新加载整页的情况下实时重新加载吗？答案

【问题标题】：Possible to have grunt compile less and live reload without a full page reload?可以减少 grunt 编译并在不重新加载整页的情况下实时重新加载吗？
【发布时间】：2014-07-29 20:12:00
【问题描述】：

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

有没有办法在 LESS 文件编译时进行配置，在不加载整个 HTML 页面的情况下重新加载 CSS？

这是我的 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"
    }]
  }
},

【问题讨论】：

标签： angularjs gruntjs grunt-contrib-watch

【解决方案1】：

诀窍是仅在生成的 CSS 上触发 livereload，而不是在 less 文件上触发，否则您将重新加载页面。

这个手表配置对我有用：

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'],
  }
}

【讨论】：

感谢您如此明确的回答。这让我很困惑。

【解决方案2】：

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

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

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

我认为添加类似于您的 watcher 配置的内容来禁用对 .less 文件的监视就足够了：

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

【讨论】：