1

開発環境でウォッチモードを使用したいです。単一の少ないファイルで正常に機能します。しかし、app.less にインポートされるファイルが非常に少ないのです。私の app.less の外観

@import "variables";
@import "mixins";

この設定では時計モードが使えないようです。他の方法はありますか？

4

2 に答える 2

5

更新。この構文は古い grunt バージョン用であるため、使用しないでください。

これにはLiveReloadアプリを使用する必要があります。または、LiveReload ブラウザー拡張機能を使用してページをリロードできる別のソフトウェア (おそらく、プラグインを備えた Sublime Text エディター)。

可能なセットアップは、 grunt-contrib-less および grunt-reload モジュールがインストールされているGruntを使用した Node.jsです。

grunt.js の設定は次のようになります。

module.exports = function(grunt) {
grunt.initConfig({
    //  Start LiveReload server
    reload: {
        port: 35729,
        liveReload: {}
    },
    //  Simple css compilation
    less: {
        src: 'less/app.less',
        dest: 'css/app.css'
    },
    //  Reload files on change
    watch: {
        less: {
            files: ['less/*.less'],
            tasks: 'less'
        },
        reload: {
            files: ['*.html',
                    'css/app.css',
                    'js/*.js'],
            tasks: 'reload'
        }
    }
});

//  Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');

//  Register default task
grunt.registerTask('default', 'less');
};

次に、実行する必要があります

$ grunt watch:less

と

$ grunt watch:reload

2 つの別々の端末ウィンドウで。

于 2012-10-29T08:37:07.447 に答える
3

このコメント Refresh less css which has other import less files without page loadに完全に同意します。ありがとう、テヴァシャ。

しかし、複数のターミナルを起動する必要はありません。

watch: {
    less: {
        files: ['less/*.less'],
        tasks: 'less'
    },
    reload: {
        files: ['*.html',
                'css/app.css',
                'js/*.js'],
        tasks: 'reload'
    }
}

その後、視聴を開始できます

$ grunt watch

以上です。それより少ないファイルを変更すると、lessタスクのみが開始されます。

PS: この回答は、grunt 0.4 で適切に動作するように更新されました。

于 2013-01-19T20:01:05.997 に答える