Aurelia - 捆绑

• 

  简述

  在本章中，您将学习如何在 Aurelia 框架中使用gulpfile。
• 

  第 1 步 - 安装先决条件

  你可以安装aurelia-bundler通过在command prompt.

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

  如果您没有安装 gulp，您可以通过运行此代码来安装它。

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

  你也可以安装require-dir包从npm.

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

• 

  第 2 步 - 创建文件夹和文件

  首先，创建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
  

  你需要创建bundle.js里面的文件tasks文件夹。

  
  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文件。gulpfile过程完成后，config.js文件也会更新。您可以包含要注入和缩小的所有文件和插件。

  gulpfile.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);
  });  
  

  command promptgulpfile完成时会通知我们。