web-dev-qa-db-fra.com

Comment puis-je obtenir Grunt / Watch / LiveReload pour recharger Sass / CSS sans un rafraîchissement complet de la page?

Jusqu'à présent, j'ai tout fait fonctionner comme je veux (qui surveille tous les fichiers que je veux et rafraîchit chaque fois qu'il y a un changement), à part j'aimerais pouvoir apporter des modifications à Sass/CSS et le rafraîchir dans le navigateur sans chargement de page. Ce n'est pas énorme, mais parfois j'essaie de modifier le style de quelque chose après qu'il y ait eu une interaction entre les pages et je dois recommencer le processus si la page est actualisée.

Je suis assez certain que c'est possible, mais cela m'échappe jusqu'à présent.

Voici mon 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']);

};

Une chose étrange que je voulais mentionner à propos de ma configuration: lorsque j'exécute grunt watch --verbose Je vois qu'il surveille .git aussi bien que .sass-cache. Cela vous semble-t-il juste? Je ne sais pas ce que j'ai fait pour y arriver.

Watching .git for changes.
Watching .sass-cache for changes.
javascriptsassgruntjslivereload
30
Trey Piepmeier

La première partie de votre question est assez simple. Reload Live recharge uniquement les fichiers que vous spécifiez dans la configuration; Par exemple, si vous spécifiez des fichiers sass, ce sont ceux qui sont rechargés. J'ai corrigé cela dans ma configuration en demandant à Grunt de regarder le fichier css dans mon répertoire dist, qui est évidemment changé à chaque recompilation du Sass.

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['index.html'],
  },
  js: {
    files: ['js/**/*.js'],
    tasks: ['jshint'],
  },
  sass: {
    options: {
      livereload: false
    },
    files: ['css/scss/**/*.scss'],
    tasks: ['sass'],
  },
  css: {
    files: ['dist/css/master.css'],
    tasks: []
  }
}

Je ne suis pas sûr de la deuxième question. Il n'affiche pas ces répertoires dans mon grunt watch --verbose pour n'importe quel projet, puis je n'exécute jamais cette commande verbalement.

37
Ben