Aurelia - การรวมกลุ่ม

ในบทนี้คุณจะได้เรียนรู้วิธีการใช้บันเดิลใน Aurelia framework

ขั้นตอนที่ 1 - การติดตั้งข้อกำหนดเบื้องต้น

คุณสามารถติดตั้ง aurelia-bundler โดยรันคำสั่งต่อไปนี้ในไฟล์ command prompt.

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

หากคุณไม่ได้ติดตั้งอึกคุณสามารถติดตั้งได้โดยเรียกใช้รหัสนี้

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

คุณยังสามารถติดตั้ง require-dir แพคเกจจาก npm.

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

คุณต้องสร้าง bundle.js ไฟล์ภายใน tasks โฟลเดอร์

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

ขั้นตอนที่ 3 - อึก

ใช้ gulpในฐานะนักวิ่งงาน คุณต้องบอกให้เรียกใช้รหัสจากbuild\tasks\bundle.js.

gulpfile.js

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

ตอนนี้สร้างงานที่คุณต้องการ งานนี้จะใช้แอพสร้างdist/appbuild.js และ dist/vendor-build.jsไฟล์. หลังจากกระบวนการบันเดิลเสร็จสมบูรณ์ไฟล์config.jsไฟล์จะได้รับการอัปเดตด้วย คุณสามารถรวมไฟล์และปลั๊กอินทั้งหมดที่คุณต้องการฉีดและย่อขนาดได้

มัด 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);
});

command prompt จะแจ้งให้เราทราบเมื่อการรวมกลุ่มเสร็จสมบูรณ์