Aurelia - Bundling أوريليا - تجميع

 Aurelia - Bundling أوريليا - تجميع

في هذا الفصل ، ستتعلم كيفية استخدام التجميع في إطار عمل Aurelia.

الخطوة 1 - تثبيت المتطلبات الأساسية

يمكنك تثبيت aurelia-bundler عن طريق تشغيل الأمر التالي في موجه الأوامر .

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

إذا لم يكن لديك برنامج gulp مثبتًا ، فيمكنك تثبيته عن طريق تشغيل هذا الرمز.

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

يمكنك أيضًا تثبيت حزمة request -dir من npm .

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

الخطوة 2 - إنشاء مجلدات وملفات

أولاً ، أنشئ ملف gulpfile.js في دليل جذر التطبيقات.

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

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

تحتاج إلى إنشاء ملف bundle.js داخل مجلد المهام .

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

الخطوة 3 - الجلبة

استخدم البلع باعتباره عداء المهام. تحتاج إلى إخباره بتشغيل الكود من build \asks \ 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);
});  

في موجه الأوامر سوف اعلامنا عندما تجميع كاملة.