Question

我目前正在使用Cordova平台开发hybird应用程序并使用Ripple Emulator进行调试。

应用程序本身并不真正依赖于目标平台的本机API，因此我可以使用Ripple仿真器提供的一些仿真功能进行测试，而无需担心。每次我对源文件进行更改时，我的gulp任务都会编译javascript（我正在使用带有babel的ES6）并自动将其与browserify一起打包。

但是，我需要重新加载浏览器选项卡，以便我可以看到更改，更不用说如果重新加载选项卡，ripple会重新加载它的模块和引擎。

由于效率低下，我尝试创建一个gulp任务，可以自动重新加载（将更改注入）浏览器。我使用以下设置：

gulp.task('cordova-prepare', function() {
    exec('cordova prepare');
});

gulp.task('reload', function() {
    browserSync.reload();
});

gulp.task('script', function() {
    var bundler = browserify("./src/Main.js");
    bundler.transform("babelify", {presets: ["es2015"]});

    bundler.bundle()
        .on('error', function(err) { gutil.log(err); })
        .pipe(source('app.js'))
        .pipe(gulp.dest('./www/scripts'))
        .pipe(browserSync.stream());
});


gulp.task('watch', function() {
    gulp.watch('./src/**/*.js', ['script']);

    gulp.watch('./www/**/*.html', ['cordova-prepare', 'reload']);
    gulp.watch('./www/**/*.css', ['cordova-prepare', 'reload']);
    gulp.watch('./www/**/*.js', ['cordova-prepare']);
});

gulp.task('watch-source', ['script'], function() {
    gulp.watch('./src/**/*.js', ['script']);
});

gulp.task('ripple', ['script', 'watch'], function() {
    var options = {
        keepAlive: false,
        open: true,
        port: 4400
    };

    browserSync.init({
        proxy: "http://localhost:" + options.port + "/?enableripple=cordova-3.0.0"
    });

    ripple.emulate.start(options);
});

主要问题是，每当我对javascript文件进行更改时，它都会重新加载选项卡而不是注入更改。我也不太清楚cordova prepare命令是什么，但似乎有必要为platform文件夹上的当前平台创建Web应用程序。

请注意，我在stream()任务上使用script来注入javascript，但它无效

我所期待的是当我更改某些文件时，它会将新文件注入浏览器选项卡（包括html和css）

有什么想法吗？

设置BrowserSync和Ripple Emulator

0 个答案: