- Aurelia教程
- Aurelia - 主页
- Aurelia - 概述
- Aurelia - 环境设置
- Aurelia - 第一次应用
- Aurelia - 组件
- Aurelia - 组件生命周期
- Aurelia - 自定义元素
- Aurelia - 依赖注入
- Aurelia - 配置
- Aurelia - 插件
- Aurelia - 数据绑定
- Aurelia - 绑定Behave
- Aurelia - 转换器
- Aurelia - 活动
- Aurelia - 事件聚合器
- Aurelia - 表格
- Aurelia - HTTP
- Aurelia - 参考
- Aurelia - 路由
- Aurelia - 历史
- Aurelia - 动画
- Aurelia - 对话
- Aurelia - 本地化
- Aurelia - 工具
- Aurelia - 捆绑
- Aurelia - 调试
- Aurelia - 社区
- Aurelia - 最佳实践
- Aurelia有用的资源
- Aurelia - 快速指南
- Aurelia - 有用的资源
- Aurelia - 讨论
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
您将需要构建文件夹。在此目录中,添加另一个名为tasks的文件夹。
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 - GruntGrunt
使用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); });
捆绑完成后,命令提示符将通知我们。