4

これが私のGruntfile.js

watch: {
            options: { livereload: true },
            compass: {
                files: ['assets/sass/*.{scss,sass}'],
                tasks: ['compass']
            },
            // js: {
            //  files: '<%= jshint.all %>',
            //  tasks: ['jshint', 'uglify']
            // },
            livereload: {
                // files: ['*.html', '*.php', 'assets/stylesheets/**/*.{css}']
                files: ['*.html', '*.php', 'assets/stylesheets/custom.css']
            }
        },

        // compass and scss
        compass: {
            dist: {
                options: {
                config: 'config.rb',
                force: true
                }
            }
        },

そして、これはからの出力ですgrunt watch： 

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 11.033s at Fri Dec 06 2013 14:20:48 GMT+0100 (CET) - Waiting...
OK
>> File "assets/stylesheets/custom.css" changed.
>> File "assets/sass/custom.scss" changed.

Running "compass:dist" (compass) task
overwrite assets/stylesheets/custom.css (0.701s)
identical assets/stylesheets/app.css (3.452s)
Compilation took 4.158s

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 10.719s at Fri Dec 06 2013 14:21:53 GMT+0100 (CET) - Waiting...
  1. ..だから、なぜ livereload はページを更新するのにそんなに時間がかかり、.scss ファイルの変更をプレビューするのに 10 秒もかかるのですか?
  2. ..私が知りたいもう 1 つのことは、app.css でのコンパイルの遅れを回避する方法です。これには約 4 秒かかりましたが、それは変更されていませんか?

この構成で livereload ブラウザー拡張機能を使用しています。

ありがとう。

4

2 に答える 2

2

1a: 監視タスクで処理を高速化するには、オプション spawn:false を試してください。これにより動作が不安定になる可能性がありますが、試してみる価値はあります。大丈夫だと思われる場合は、それを行ってください。ただし、監視タスクにさまざまなタスクを多数追加すると、後で問題が発生する可能性があります。ただし、その場合は心配して、潜在的に無効にすることができます。

1b:

まず、コンパス タスクで livereload を有効にしないでください。(あなたはそれをグローバルに持っており、css でのみ取り込んでいます) このため、scss ファイルの livereload イベントもトリガーします。しかし、livereload クライアントはこのファイルを認識していないため、ページ全体をリロードします。報告された唯一のファイルがコンパイルされた css であることを確認してください。

次に、watch タスクは、以前に変更されたファイルに対しても livereload をトリガーします。これは既知ですが、マスターでは修正されていると思いますが、まだ公開されていません。

https://github.com/gruntjs/grunt-contrib-watch/issues/205

2:

それを比較するためにコンパイルする必要があります。その後、同一であると報告するだけです。

于 2013-12-13T19:43:36.540 に答える
0

.css の変更のみを挿入するには:

    watch: {
        compass: {
            files: ['assets/sass/*.{scss,sass}'],
            tasks: ['compass']
        },
        livereload: {
            files: ['assets/stylesheets/*.css'],
            options: { livereload: true }
        }
    }

残念ながら、コンパイル時間も同様に遅くなります (コンパスに違いありません)。

于 2013-12-18T19:20:47.233 に答える