2

LESS と grunt watch を使用してその場で変更をコンパイルする基本的なアプリケーションがあります。

非常に長い間、LESS ファイルを変更するとすべてが再コンパイルされるという事実について不平を言ってきました。必要なものだけをコンパイルできなかったのは、時間の無駄でした。しかし、私はそれを賢くしたかったので、もしあれば、import変更されたファイルだけでなく、影響を受けるファイルもコンパイルします.

今日、私はこれを修正することにしました。それはまったく簡単ではありません。Grunt ウォッチはこれを処理しません。grunt-newer を使用してもうまくいきませんでした。どちらの場合も、カスタム ルールを記述する必要があります。

最後に、https://github.com/tschaub/grunt-newerを使用しませんでした。これは grunt-sync ではうまく機能しないためですが、もっと重要なのは、LESS のニーズに合わないためです。 LESS のインポート処理を処理しないため、関連するファイルはコンパイルされませんが、変更されたファイルのみがコンパイルされます。「スマート」ではありません。

(そのようなことを考慮してカスタマイズすることは可能であり、gist でいくつかのスクリプトが提供されていますが、公式のリポジトリがないため、必要なものを見つけるのはちょっと難しいですが、一見の価値があります。)

これは、実際の、または簡単な答えがない、何度も尋ねられた質問です。見る：

Grunt.jsで複数のファイルを監視し、変更されたファイルでのみタスクを実行するにはどうすればよいですか?

Grunt watch: すべてではなく 1 つのファイルのみをコンパイルする

変更されたファイルのみで Grunt ウォッチレス

Grunt: 複数のファイルを監視、コンパイルのみ変更

https://github.com/tschaub/grunt-newer/issues/29

https://gist.github.com/cgmartin/10328349

4

1 に答える 1

0

私のソリューションは、私のアプリに固有のカスタム ソリューションですが、あなたのアプリにも使用できることを願っています! とてもシンプルです。

stylesいくつかのファイルとディレクトリ (少ない) を含むフォルダーがあると仮定すると、私の解決策は、すべての少ないファイルをコンパイルするのではなく、変更されたファイルのみをコンパイルするフォルダーのホワイト リストを定義することでした。

うなり声の少ない構成: https://gist.github.com/Vadorequest/bd46bb4d6c326e837710

うなり声構成: https://gist.github.com/Vadorequest/b48bcfda2d0205ba3f95

フォルダのアーキテクチャ: フォルダのアーキテクチャ

これを処理する「最も簡単な」方法は、grunt.watchイベントをオーバーライドして、変更されたファイルが他のファイルに影響を与える可能性があるかどうかを確認することです。独自のアーキテクチャに応じて、いくつかの方法があります。他のすべてに影響を与えるファイルはstylesフォルダーのルートまたはサブフォルダー内にあるため、私の場合は十分に単純です。filePathそのため、ファイルがホワイトリストに属しているかどうかを「ただ」確認する必要がありました。その場合は、その場で grunt 構成を更新し、src変更されたファイル名のみに一致するようにプロパティを変更します。

grunt.event.on('watch', function(action, filePath, watchedTargetName) {
        switch(watchedTargetName){
            /*
            Compile only what is needed.
            Based on a white list of sub folders within the "styles" directory.
            White listed folders will not require to compile all LESS file, but only the changed ones.
            Others will require to compile everything.
             */
            case 'styles':
                // Root path from where the files are located.
                var rootPath = 'assets/linker/styles/';
                // Path of the file
                var filePathRelativeToRootPath = path.relative(rootPath, filePath);
                // Grunt task name (see less.js)
                var gruntTask = 'less';
                // Sub task to use.
                var subTaskName = 'dev';
                // List of folders that don't need to recompile everything.
                var whiteListFolders = [
                    'common',
                    'devices',
                    'layous',
                    'themes',
                    'views',
                ];

                if(action === 'changed'){
                    var isDir = path.dirname(filePath) !== '';
                    var dirName = filePathRelativeToRootPath.split(path.sep)[0];

                    // If the file is a directory and is belongs to the white list then we will override the grunt config on the fly to compile only that file.
                    if(isDir && _.contains(whiteListFolders, dirName)){
                        // We load the less config located at tasks/config/less.js
                        var config = grunt.config(gruntTask);

                        // Checks for any misconfiguration.
                        if(!config){
                            log.error('There is no config for the grunt task named ' + gruntTask);
                        }

                        if(!config[subTaskName]){
                            log.error('There is no sub task named ' + subTaskName + " for the the grunt task named " + gruntTask);
                        }

                        // Update the files.src to be the path to the modified file (relative to srcDir).
                        // Instead of updating all files, it will only update the one that has been changed.
                        config[subTaskName].files[0].src = filePathRelativeToRootPath;
                        grunt.config("less", config);
                        console.info('watcher LESS - The file ' + filePath + ' is in the white list and will be updated alone.');
                    }else{
                        console.info('watcher LESS - The file ' + filePath + ' is not is the white list, all LESS files will be updated.');
                    }
                }
                break;
        }
    } );

ayolan.less基本的に、ディレクトリ内で名前が付けられたファイルを変更すると、themes更新時にメモリに設定されるものが次のようになります。( https://gist.github.com/Vadorequest/b48bcfda2d0205ba3f95#file-watch-js-L80-L81を参照)

{
    dev: {
        files: [{
            expand: true,
            cwd: 'assets/linker/styles/',
            src: 'themes/ayolan.less',// This has been changed in memory, for this specific watch event.
            dest: '.tmp/public/linker/styles/',
            ext: '.css'
        }]
    }
}

これにより、http://www.browsersync.io/を使用できるようになりました。これにより、LESS ファイルに単純な変更を加えてから約 1 秒後にブラウザーが更新されます。これは、すべての LESS ファイルをコンパイルする必要があったため、約 5 秒前でした。そしてそれらをコピーします。(他のパフォーマンスの変更も行いましたが、その目標を達成するのに確実に役立ちました!)

于 2015-10-09T18:51:53.323 に答える