如何在不使用Pub Deploy的情況下部署您的dart應用（使用Web UI）

Question

手動部署Dart Web-ui應用的最佳策略是什麼？

酒吧部署不適合我，我提出了錯誤報告。所以我在想什麼是手動部署的最佳方式。

這是我如何開始：

1）從項目的根我編譯的WebUI組件（dwc.dart）

2）目錄更改爲網絡輸入/輸出然後運行dart2js

3）所有.js文件複製到該腳本/ js的公共文件夾服務器

4）appname.html複製到服務器改變CSS和腳本路徑選擇3

5）確保dart.js與第3項一樣也在同一目錄中

這就是我得到的。那麼我還需要做什麼？

幾個問題：

1）我手動更改生成的.js文件的文件路徑指向公共文件夾服務器上爲他們所引用的文件，並確保這些文件在服務器上也？

2）我是否需要將所有軟件包複製到服務器？

3）服務器上的任何首選文件結構？

對此的任何提示真的很感激。

謝謝。

Answer 1

我寫了一個咕嚕腳本它（因爲我沒有時間來查找如何正確地編寫代碼咕嚕，因爲它是一個爛攤子我不同意這樣的代碼），但我基本上做到這一點：

• 編譯文件的列表，DWC給定out DIR
• 它編譯成JavaScript
• 清理所有非部署文件
• 變化的HTML裏面的一些路徑，以匹配服務器路徑（因爲某些原因，這個通過編譯過程得到改變）
• 刪除除我真正需要的那些（JS interopt和瀏覽器）

由於我只使用JS的版本，我刪除所有鏢包中的所有包。由於HTML文件中的路徑取決於您，因此您可以使用適合您/您的服務器的結構。

Answer 2

我可以爲您提供一個Grunt腳本來了解任務的順序。實際上，我使用的順序是：

1. 創建構建目錄。我通常使用/ build/web。我通常將這些文件（index.html，main.dart，/ css等）創建到/ web目錄中。我將剩餘的組件創建到/ lib目錄中。
2. 編譯。dart文件，其中包含main（）函數（在我的案例中爲更簡單的項目「main.dart」）文件到Javascript並將其放到/ build/web目錄
3. 將其他所需的文件和文件夾複製到/ build/web目錄。另外，在這個過程中，你將複製你的項目需要的軟件包。你會在下面提供的例子中看到。
4. 從項目
5. 刪除所有空文件夾，您可以創建一個咕嚕任務在瀏覽器中打開/index.html文件一旦建立過程已經結束（我不會提供這個例子）

鏢測試項目的結構：

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

所以，繁重的示例腳本覆蓋步驟1 - 4看起來像這樣（把它複製到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文件到你的項目的根目錄，並複製/粘貼下面的腳本：

在Windows中，終端在Linux中

{ 
    "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" 
    } 
} 

打開命令提示符，導航到你的項目的根目錄下，並使用此命令：

npm install 

等到所有需要的Grunt模塊都會下載到您的本地項目中。一旦完成後，發出此命令在命令提示符或終端：

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

您可以使用此啓動咕嚕默認任務，而無需在全球安裝在系統上咕嚕。

現在，要了解項目的確切構建結構（包括項目需要的包），請使用Pub Build進行構建。然後您將能夠指示Grunt創建相同的目錄結構。

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

希望這可以幫助大家瞭解這個過程，並首先讓您開始測試應用程序。添加您的評論，使其更好，並更加簡化。