IonicなしのデバイスでのCordovaホットリロード

Question

Ionicや他のフレームワークなしのCordovaを使用しています。私の問題は、Ionicを使用せずにCordova用のホットリロード機能やプラグインが見つからないことです。フレームワークなしでiOSシミュレータにリロードする方法はありますか？

Answer 1

私はCordovaで独自の「ホットリロード」を実装しました。私は元のそれがどのようなものか分かりませんが、それは私のニーズにはうまくいきます。 広いラインで、これは次のように動作します。開発モードでは、静的なWebサーバーが起動され、コンテンツがこのサーバーのURL：<content src="http://10.0.3.2:8080" />であることがcordovaに指示されます。

静的サーバーはアセット（js/css/html）の変更と自動リロードもリッスンします。私たちは、これにgulp connectを使用します。私はこれを達成するためにhttps://www.npmjs.com/package/gulp-connectを使用します。

プロダクションモードでは、アセットをコンパイルし、標準の静的ファイルを使用してアプリケーションをロードするようにコードバに指示する必要があります。

詳細：cordova.xmlで

このアプリを起動するにはコルドバを伝えるラインである：

<content src="index.html" /> 

だから、これはその希望「動的」バージョンに交換しなければなりませんホットリロードを許可します。私はgulp-connectを使用してこの購入を達成しました。これは静的ファイルサーバーを開始します。

gulp.task('connect', function() { 
    return connect.server({ 
     root: 'www', 
     livereload: true, 
     fallback: 'www/index.html', 
     https: false 
    }); 
    }); 

は、私が開発中で、生産にコルドバの設定を切り替える2つのタスクが作成された：あなたはコルドバJavaScriptファイルは、開発のWebサーバーからアクセス可能であることを確認する必要が

// Development 
    // adds the localhost(on the emulator as 10.0.3.2) as 
    // the content source for the cordova app 
    gulp.task('cordova-dev-server-android', function() { 
    return gulp.src(['config.xml']) 
     .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1http://10.0.3.2:8080$3")) 
     .pipe(gulp.dest('.')); 
    }); 

    // Production 
    // adds the static file as 
    // the content source for the cordova app 
    gulp.task('cordova-static-file', function() { 
    return gulp.src(['config.xml']) 
     .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1index.html$3")) 
     .pipe(gulp.dest('.')); 
    }); 

一つ重要なこと。ここでも、私は開発/生産の2つのタスクでこれを達成しました。

// Development 
    // Creates symlinks for the devserver 
    // so the app has access to cordova files 
    gulp.task('create-cordova-symlink-android', ['remove-cordova-symlink'], function() { 
    return gulp.src('') 
     .pipe(exec('ln -sv ../platforms/android/assets/www/cordova.js www')) 
     .pipe(exec.reporter()) 
     .pipe(exec('ln -sv ../platforms/android/assets/www/cordova_plugins.js www')) 
     .pipe(exec.reporter()) 
     .pipe(exec('ln -sv ../platforms/android/assets/www/plugins www')) 
     .pipe(exec.reporter()); 
    }); 


    // Production 
    // Removes symlinks for production 
    // see create-cordova-symlink-android 
    gulp.task('remove-cordova-symlink', function() { 
    var options = { 
     continueOnError: true 
    }; 
    return gulp.src('') 
     .pipe(exec('rm www/cordova.js', options)) 
     .pipe(exec('rm www/cordova_plugins.js', options)) 
     .pipe(exec('rm -Rf www/plugins', options)); 
    }); 

ここではgulpを使用していますが、これは任意のタスクランナーを使用して実装できますが、他のプラットフォームでもこのコードを少し修正する必要があります。

これが役に立ちます。