gulp-bundle-assets中文文档|gulp-bundle-assets js中文教程|解析

npm npmdoc 2年前 (2021-12-30) 470次浏览

gulp-bundle-assets中文文档|gulp-bundle-assets js中文教程|解析

安装命令:npm i gulp-bundle-assets

吞咽捆绑资产NPM 版本 构建状态 覆盖状态

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

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

  1. 吞咽连接
  2. gulp-sourcemaps
  3. gulp-uglify
  4. gulp-clean-css
  5. gulp-rev
  6. 大口订单

该项目的流架构还允许您插入您希望的任何吞咽转换

安装

$ 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 的完整示例,请参见此处

其他特性

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

为什么?

有多种方法可以捆绑静态资产以在您的 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

执照

麻省理工学院

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:gulp-bundle-assets中文文档|gulp-bundle-assets js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}