Question

手动部署Dart Web-ui应用程序的最佳策略是什么？

pub deploy对我不起作用，我已经提出了错误报告。所以我在想什么是手动部署的最佳方式。

这就是我的开始：

1）从项目根目录编译webui组件（dwc.dart）

2）将目录更改为web / out然后运行dart2js

3）将所有.js文件复制到服务器

上的scripts / js公共文件夹中

4）将appname.html复制到服务器，将css和脚本路径更改为选项3

5）确保dart.js与项目3在同一目录中

这是我得到的。那我还需要做什么呢？

几个问题：

1）我是否手动更改生成的.js文件中的文件路径以指向服务器上的公共文件夹以查找它们所引用的文件，并确保这些文件也在服务器上？

2）我是否还需要将所有包复制到服务器？

3）服务器上的任何首选文件结构？

对此的任何提示都非常感谢。

感谢。

Answer 1

我为它写了一个Grunt脚本（因为我没有时间查找如何正确编写Grunt的代码，我没有共享代码，因为它是一团糟）但我基本上这样做：

使用dwc将文件列表编译为给定的out dir
将其编译为javascript
清理所有不可部署的文件
更改HTML中的一些路径以匹配服务器路径（出于某些原因，这会被编译过程改变）
删除除我真正需要的所有包（JS interopt和浏览器）

由于我只使用JS版本，因此我删除了所有的dart包。由于HTML文件中的路径由您决定，因此您已经可以使用适合您/您的服务器的结构。

Answer 2

我可以为您提供Grunt脚本来理解任务的顺序。实际上我使用的顺序就是这个：

创建构建目录。我通常使用/ build / web。我通常会在/ web目录中创建这些文件（index.html，main.dart，/ css等）。我将其余组件创建到/ lib目录。
将包含main（）函数（＆＃34; main.dart＆＃34;在我的情况下为简单项目）文件的.dart文件编译为Javascript并将其放入/ build / web目录
将其他所需的文件和文件夹复制到/ build / web目录。此外，在此过程中，您将复制项目所需的软件包。您将在下面提供的示例中看到。
从项目中删除所有空文件夹
您可以创建一个Grunt任务，以便在构建过程结束后在浏览器中打开/index.html文件（我不会提供此示例）

飞镖测试项目的结构：

testApp
  - gruntfile.js
  - package.js
  /lib
  /packages
      /angular
  /web
    - index.html
    - main.dart
    /css
    /img

因此，用于涵盖1-4步骤的Grunt示例脚本如下所示（将其复制到gruntfile.js）：

module.exports = function (grunt) {
    grunt.initConfig({
        // 1.
        // create build web directory
        mkdir: {
            build: {
                options: {
                    create: ['build/web']
                }
            }
        },
        // 2.
        // compile dart files
        dart2js: {
            options: {
                // use this to fix a problem into dart2js node module. The module calls dart2js not dart2js.bat.
                // this is needed for Windows. So use the path to your dart2js.bat file
                "dart2js_bin": "C:/dart/dart-sdk/bin/dart2js.bat"
            },
            compile: {
                files: {'build/web/main.dart.js': 'web/main.dart'}
            }
        },
        // 3.
        // copy all needed files, including all needed packages
        // except the .dart files.
        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        src: [
                            'web/!(*.dart)',
                            'web/css/*.css',
                            'web/res/*.svg',
                            'web/packages/angular/**/!(*.dart)',
                            'web/packages/browser/**/!(*.dart)'
                        ],
                        dest: 'build'
                    }
                ]
            }
        },
        // 4.
        // remove empty directories copied using the previous task
        cleanempty: {
            build: {
                options: {
                    files: false
                },
                src: ['build/web/packages/**/*']
            }
        },
    });

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.registerTask('default', [
        'mkdir:build',
        'dart2js',
        'copy:build',
        'cleanempty:build'
    ]);
};

所以这是Grunt脚本示例。

在项目的根目录中创建/gruntfile.js文件，然后将脚本复制/粘贴到其中。

在项目的根目录中创建/package.json文件并复制/粘贴以下脚本：

{
  "name": "testApp",
  "version": "0.0.1",
  "description": "SomeDescriptionForTheTestApp",
  "main": "",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
  "author": "YourName",
  "peerDependencies": {
      "grunt-cli": "^0.1.13"
  },
  "devDependencies": {
      "grunt": "^0.4.5",
      "grunt-cleanempty": "^1.0.3",
      "grunt-contrib-copy": "^0.7.0",
      "grunt-dart2js": "0.0.5",
      "grunt-mkdir": "^0.1.2",
      "matchdep": "^0.3.0"
  }
}

在Windows中打开命令提示符，在Linux中打开终端，导航到项目的根目录并使用此命令：

npm install

等待所有需要的Grunt模块下载到本地项目。完成此操作后，在命令提示符或终端：

node -e "require('grunt').cli()"

您可以使用它来启动Grunt默认任务，而无需在系统上全局安装Grunt。

现在，要了解项目的确切构建结构（包括项目所需的包），请使用Pub Build进行构建。然后，您将能够指示Grunt创建相同的目录结构。

如果需要，您可以添加其他任务（如缩小）。

希望这将有助于大家了解这一过程并让您首先开始使用测试应用程序。添加您的评论，以使其更好，并进一步简化。

如何在不使用Pub Deploy的情况下部署您的dart应用程序（使用Web ui）

2 个答案: