Aurelia - 打包

在本章中，您將學習如何在 Aurelia 框架中使用打包。

步驟 1 - 安裝先決條件

您可以透過在命令提示符中執行以下命令來安裝aurelia-bundler。

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

如果您沒有安裝 gulp，可以透過執行此程式碼進行安裝。

C:\Users\username\Desktop\aureliaApp>npm install gulp

您還可以從npm安裝require-dir包。

C:\Users\username\Desktop\aureliaApp>npm install require-dir

步驟 2 - 建立資料夾和檔案

首先，在應用程式根目錄中建立gulpfile.js檔案。

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

您將需要build資料夾。在此目錄中，新增另一個名為tasks的資料夾。

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

您需要在tasks資料夾內建立bundle.js檔案。

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

步驟 3 - Gulp

使用gulp作為任務執行器。您需要告訴它從build\tasks\bundle.js執行程式碼。

gulpfile.js

require('require-dir')('build/tasks');

現在，建立您需要的任務。此任務將獲取應用程式，建立dist/appbuild.js和dist/vendor-build.js檔案。打包過程完成後，config.js檔案也將更新。您可以包含所有您想要注入和壓縮的檔案和外掛。

bundle.js

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',
	
   bundles: {
      "dist/app-build": {
         includes: [
            '[*.js]',
            '*.html!text',
            '*.css!text',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
            'aurelia-bootstrapper',
            'aurelia-fetch-client',
            'aurelia-router',
            'aurelia-animator-css',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task('bundle', function() {
   return bundle(config);
});  

命令提示符將通知我們打包何時完成。