Aurelia - 捆绑

Aurelia Bundling - 从简单和简单的步骤学习Aurelia，从基本到高级概念，包括概述，环境设置，第一个应用程序，配置，依赖注入，组件，组件生命周期，自定义元素，插件，数据绑定，绑定行为，转换器，事件，事件聚合器，表单，HTTP，参考，路由，历史，动画，对话框，本地化，工具，安全性，捆绑，调试，社区，最佳实践。

在本章中，您将学习如何在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步 - 创建文件夹和文件

首先，在apps根目录中创建 gulpfile.js 文件.

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

您需要 build 夹.在此目录中，添加另一个名为 tasks 的文件夹.

C:\Users\username\Desktop\aureliaApp>mkdir buildC:\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);});

命令提示符将在捆绑完成时通知我们.

Aurelia Bundling CMD