📌  相关文章
📜  Aurelia-捆绑销售

📅  最后修改于: 2020-12-09 05:27:13             🧑  作者: Mango

在本章中，您将学习如何在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

您将需要构建文件夹。在此目录中，添加另一个名为task的文件夹。

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-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捆绑CMD