web-dev-qa-db-ja.com

ページ全体を更新せずにGrunt / Watch / LiveReloadでSass / CSSをリロードするにはどうすればよいですか？

これまでのところ、私はSass/CSSに変更を加えて更新できるようにしたい以外は、私が望むようにすべての作業を行っています（必要なすべてのファイルを監視し、変更があるたびに更新しています）。ページを読み込まずにブラウザで。それは大したことではありませんが、ページの操作があった後に何かのスタイルを変更しようとしていることがあり、ページが更新された場合はプロセスを最初からやり直す必要があります。

私はこれが可能であるとかなり確信していますが、今のところそれを逃れています。

これが私の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']);

};

セットアップについて言及したい奇妙なことの1つ：grunt watch --verboseを実行すると、.gitおよび.sass-cacheを監視していることがわかります。それは正しいと思われますか？それを実現するために私が何をしたか分かりません。

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

質問の最初の部分は簡単です。ライブリロード設定で指定したファイルのみをリロードします;つまり、sassファイルを指定した場合は、再ロードされるファイルです。私のセットアップでは、Gruntにdistディレクトリのcssファイルを監視させることでこれを修正しました。これは、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: []
  }
}

2番目の質問についてはわかりません。プロジェクトのgrunt watch --verboseにこれらのディレクトリが表示されないため、このコマンドを冗長に実行することはありません。

37
Ben