gruntfileスタートサーバ、自動ロード、自動オープンin broswer

Question

私はgruntfileとフロントエンド開発者が一般的ではありません。gruntfileを設定して、デフォルトタスクからサーバを実行しようとしています。それはindex.htmtではなく、Grunt-Serve pageで開き、src/index.htmlに移動する必要があります。

私gruntfile：

module.exports = function(grunt) { 
    // Project configuration. 
    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    serve: { 
     options: { 
      port: 9000, 
      hostname: 'localhost', 
     } 
    } 
    }); 

    //Load Grunt serve task 
    grunt.loadNpmTasks('grunt-serve'); 

    grunt.registerTask('default', ['serve']); 

}; 

がpackage.json：

"devDependencies": { 
    "grunt": "^1.0.1", 
    "grunt-serve": "^0.1.6" 
    } 

も私はブラウザでプロジェクトを開くautoにgruntfileやサーブタスクを使用することが可能であることを前に見てきました。 ..パッケージ私はこれが必要でしょう....？また、いったん開発していくうちに、自分の変更が生きているのを見たいと思います。

ヘルプが表示されます

Answer 1

あなたはおそらくブラウザー同期を探しています。通常、ブラウザは自動的に開きます。

https://www.browsersync.io/docs/grunt

をしかし、単にあなたが始めるために、この設定を試してください：あなたはここにいくつかの設定例を見ることができます

最初の実行に$ npm install grunt-browser-sync --save-dev

Gruntfile.js：

を

module.exports = function(grunt) { 
    grunt.initConfig({ 
    browserSync: { 
     bsFiles: { 
     src : [ 
      'index.html', 
      'paths/to/files/for/autoreload' 
     ] 
     }, 
     options: { 
     server: { 
      baseDir: "./" 
     } 
     } 
    } 
    }); 

    grunt.loadNpmTasks('grunt-browser-sync'); 

    grunt.registerTask('default', ['browserSync']); 
}; 

BASEDIRをしようとします指定したディレクトリ内のindex.htmlという名前のファイルを開くことができますが、これも設定することができます。必要に応じてファイル構造を変更し、設定を変更することもできます。

srcのパスを追加して自動再読み込みします。これをサスペンドまたは他のプリプロセッサと組み合わせると、他の例を見る必要があることに注意してください。