吞咽捆绑资产

从配置文件创建静态资产包：用于组合、缩小、修订等的通用接口。堆栈不可知论。生产就绪。

默认情况下，在创建包时使用以下 gulp 模块：

安装

$ npm install gulp-bundle-assets --save-dev

基本用法

创建以下文件：

// gulpfile.js
var gulp = require('gulp'),
  bundle = require('gulp-bundle-assets');
 
gulp.task('bundle', function() {
  return gulp.src('./bundle.config.js')
    .pipe(bundle())
    .pipe(gulp.dest('./public'));
});

// bundle.config.js
module.exports = {
  bundle: {
    main: {
      scripts: [
        './content/js/foo.js',
        './content/js/baz.js'
      ],
      styles: './content/**/*.css'
    },
    vendor: {
      scripts: './bower_components/angular/angular.js'
    }
  },
  copy: './content/**/*.{png,svg}'
};

然后，调用

$ gulp bundle

将产生以下文件夹结构：

-- public
   |-- content
   |   |-- fonts
   |   |-- images
   `main-8e6d79da08.css
   `main-5f17cd21a6.js
   `vendor-d66b96f539.js

高级用法

有关许多其他配置选项，请参阅示例文件夹。在完整的例子显示了大多数所有可用的选项。

另请查看我们的api 文档。

将捆绑包集成到您的应用程序中

您可以通过您最喜欢的模板引擎
和生成的bundle.result.json文件以编程方式将您的包渲染到您的视图中
。要生成bundle.result.json，请添加对的调用bundle.results：

// gulpfile.js
var gulp = require('gulp'),
  bundle = require('gulp-bundle-assets');
 
gulp.task('bundle', function() {
  return gulp.src('./bundle.config.js')
    .pipe(bundle())
    .pipe(bundle.results('./')) // arg is destination of bundle.result.json
    .pipe(gulp.dest('./public'));
});

这会产生bundle.result.json类似于以下内容的文件：

{
  "main": {
    "styles": "<link href='main-8e6d79da08.css' media='screen' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='main-5f17cd21a6.js' type='text/javascript'></script>"
  },
  "vendor": {
    "scripts": "<script src='vendor-d66b96f539.js' type='text/javascript'></script>",
    "styles": "<link href='vendor-23d5c9c6d1.css' media='screen' rel='stylesheet' type='text/css'/>"
  }
}

捆绑包的顺序将与它们在配置中指定的顺序相同。

有关使用 hogan 的完整示例，请参见此处

其他特性

观察 src 文件，只构建特定的包
- 大大加快开发速度
- 例如，将供应商和自定义 js 文件拆分为不同的包，以便自定义包在 src 更改时继续快速构建
不同环境的不同包
- 例如，NODE_ENV=production gulp bundle可以生成一组带有缩小的 src 的包，而只会生成未缩小的gulp bundlesrc
自定义吞咽转换
- 例如使用gulp-less, gulp-sass,gulp-coffee等来进一步转换您的文件
使用预先缩小的 src 文件
- 例如在生产中使用 jquery.min.js，在开发中使用 jquery.js
自定义结果类型
- 例如，为 html、jsx 或您能想到的任何自定义结果创建一个 bundle.result.json
与 3rd 方变压器一起工作
- 例如，使用创建束browserify，6to5等
保证捆绑内容顺序
使用自定义 gulp 插件选项修改内置行为
以及更多！

为什么？

有多种方法可以捆绑静态资产以在您的 web 应用程序中使用。举个例子：
腰，
早午餐，
的WebPack，
browserify，
优化，
cartero，
assetify，
资产打包，或简单地定制混搭咕噜或
一饮而尽插件。所有这些方法各有千秋，但它们都没有做到我们需要的一切：

处理所有文件类型：js、css、less、sass、coffeescript、图像、字体等…
处理各种js管理器：amd、requirejs等…
支持常见的转换：压缩、缩小、修订
支持自定义转换，例如browserify
逻辑必须在 web 应用程序中通用。也就是说，没有复制/粘贴任务。这取消了直接吞咽或咕噜声的资格。
使用现有的社区插件，即gulp任务
从多个位置使用 src，例如 bower_components、node_modules 等
快速地！

gulp-bundle-assets完成所有这些目标和更多。该项目背后的主要指导原则是提供所有必要的捆绑功能，同时尽可能灵活和可定制。

变更日志

2017/04/15 – v2.28.0 – 添加选项以在结果#90 ( @PlasmaPower ) 中输出 src 文件
2016/05/23 – v2.27.0 – 添加一致的result.json排序#71 ( @PlasmaPower )
2016年5月6日- v2.26.0 -更新许多DEPS包括：gulp-less3.1.0，gulp-coffee2.3.2和gulp-if2.0.1
2016/05/06 – v2.25.0 – 更新以使用gulp-clean-css2.0.7 而不是弃用的gulp-minify-css模块
2016/03/17 – v2.24.0 – 更新到gulp-less3.0.5 和gulp-uglify1.5.3
2015/09/16 – v2.23.0 – 添加插件选项来修改内置源映射#65 ( @narthollis )
2015/07/17 – v2.22.0 – 添加配置选项以实现一致的文件内容排序#25
2015年6月11日- v2.21.0 -更新所有DEPS，包括：gulp-rev4.0.0，gulp-less3.0.3，gulp-sourcemaps1.5.2
2015/05/07 – v2.20.0 – 添加 pluginOptions 配置选项#50
2015/05/07 – v2.19.2 – 更新到gulp-minify-css1.1.1 ( @ZaleskiR )
2015/04/24 – v2.19.1 – 修复result.jsonwindows #52上的 url 分隔符( @gregorymaertens )
2015/03/01 – v2.19.0 – 修复#47 的错误处理bundle.watch
2015/02/08 – v2.18.0 – 添加标记到禁用的源映射#45 ( @21brains-zh )
2015/02/04 – v2.17.5 – 更新示例
2015/02/04 – v2.17.4 – 添加自定义转换错误的日志记录#41
2015/02/03 – v2.17.3 – 更新示例
2015/02/03 – v2.17.2 – 添加包配置解析错误的日志记录
2014/12/05 – v2.17.1 – 在bundle.watch( @roberto )期间修复自定义结果文件名
2014/12/05 – v2.17.0 – 添加自定义结果文件名#36 ( @roberto )
2014/12/04 – v2.16.1 – 修复测试
2014年12月1日- v2.16.0 -更新DEPS，包括：gulp-rev2.0.1，gulp-sourcemaps1.2.8，gulp-uglify1.0.1
2014/10/21 – v2.15.2 – 添加对 minCSS 和 minCss #34 的支持
2014/10/10 – v2.15.1 – 添加使用 6to5（又名babel）的示例
2014/09/29 – v2.15.0 – 添加bundle.watch复制文件#33
2014/09/29 – v2.14.0 – 添加标志以禁用日志记录#16
2014/09/25 – v2.13.1 – 修复 bundleAllEnvironments: true, srcMin 总是 true #32
2014/09/23 – v2.13.0 – 添加允许不同的 watch vs bundle 目标#30
2014/09/23 – v2.12.1 – 修复了在定义选项时仅在观看期间发布结果
2014/09/23 – v2.12.0 – 添加bundle.watch包#26