Question

我有一个带LESS的Angular JS项目，我正在使用grunt来编译和显示我的页面，通过grunt服务。但是，在每次保存/编译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
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'
  ]

可以让grunt编译更少，并在没有完整页面重新加载的情况下重新加载？

2 个答案: