在本章中,您将学习如何在Aurelia框架中使用捆绑.
您可以安装 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
首先,在apps根目录中创建 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
使用 gulp 作为任务运行器.您需要告诉它运行 build\tasks\bundle.js 中的代码.
require('require-dir')('build/tasks');
现在,创建您需要的任务.此任务将使用该应用,创建 dist/appbuild.js 和 dist/vendor-build.js 文件.捆绑过程完成后, config.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); });
命令提示符将在捆绑完成时通知我们.