Возможно ли, чтобы grunt компилировался меньше и жил перезагрузкой без полной перезагрузки страницы?

У меня есть угловой проект JS с меньшим количеством и я использую grunt для компиляции и отображения моей страницы, через grunt serve. Однако после каждого сохранения/компиляции меньшего файла страница перезагружается с изменениями. Если я изменил состояние объектов на моей странице и сделал меньше правок, перезагрузка страницы повторно устанавливает состояние страницы, и мне нужно снова внести все изменения, чтобы увидеть, достаточно ли моего исправления CSS.

Есть ли способ настроить это, где чем меньше файл компилируется, тем CSS перезагружается без загрузка всей HTML-страницы?

Вот раздел подключения моего ворчания.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"
    }]
  }
},
2 3
angularjs gruntjs grunt-contrib-watch

2 ответа:

Фокус в том, чтобы вызвать livereload только на сгенерированном CSS, а не на меньшем количестве файлов, иначе вы получите перезагрузку страницы.

Эта конфигурация часов делает трюк для меня: 

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

Насколько я понимаю, если watcher уведомляет об изменении, он запускает перезагрузку связанных ресурсов в браузере, но если нет связанного ресурса, он запускает полную перезагрузку.

Поэтому, если есть изменения, которые не загружаются в браузер, он запускает полную перезагрузку.

И т. д.меньше файла не загружается в браузер только сгенерированный css.

Я думаю, что достаточно добавить что-то похожее на ваш watcher config, чтобы отключить наблюдение .меньше файл: 

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