node.js - 带有 grunt 的 Concat bower 组件-6ren

node.js - 带有 grunt 的 Concat bower 组件

转载作者：IT老高更新时间：2023-10-28 23:13:10

26

4

我正在构建一个需要少量前端库/框架的应用程序，例如:

jQuery
JQueryUI
AngularJS
基金会

我正在使用 bower 下载组件。此时我的 HTML 看起来像:

<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>

我的目标是制作一个 grunt 脚本，它会自动获取已安装的组件，合并并缩小它们并将它们输出为 lib.js。

问题:

通过我的所有研究，我弄清楚了如何连接目录中的所有文件。我的目标是获取 bower 组件并将它们连接起来，而不是在 gruntfile 中一一列出。我该如何存档？

是否可以只使用我想要的模块而不是拥有整个 UI 来构建自定义 jQuery UI。

谢谢。

最佳答案

usemin是你的 friend 吗。

安装 usemin、复制、concat 和 uglify:

npm install --save-dev grunt-usemin
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-uglify

在您的 HTML 文件中设置构建 block :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <!-- build:js lib.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/angular/angular.js"></script>
    <script src="components/etc/etc.js"></script>
  <!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>

设置您的 Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    copy: {
      dist: {
        files: [ {src: 'index.html', dest: 'dist/index.html'} ]
      }
    },

    'useminPrepare': {
      options: {
        dest: 'dist'
      },
      html: 'index.html'
    },

    usemin: {
      html: ['dist/index.html']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-usemin');

  grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};

咕噜声

grunt

结果:

├── Gruntfile.js
├── components
│   ├── angular
│   │   └── angular.js
│   ├── etc
│   │   └── etc.js
│   └── jquery
│       └── jquery.js
├── dist
│   ├── index.html
│   └── lib.js
├── index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <script src="lib.js"></script>
</head>
<body>
<h1>usemin</h1>
</body>
</html>

关于node.js - 带有 grunt 的 Concat bower 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21148042/

26

4

0

文章推荐： c++ - 在 C/C++ 中从文件中读取最后 n 行

文章推荐： android - Room数据库中具有相同类型对象的多个表

文章推荐： android - 刷新库存时出错(查询商品价格)。 (响应 : 6:Error)

文章推荐： node.js - 如何使用 Passport.js 访问 Cookie 集

bower - Bower 1.0:.bower.json有何处理？
我刚刚升级到Bower 1.0，做了一个bower install，发现了一堆新的.bower.json文件（注意前导时期）。我在changelog或文档中没有找到对.bower.json的引用。我
bower - Bower 的 Bower.json 中的 "ignore"？
Bower 的网站描述了 Bower.json 中的 ignore 键: ignore [array]: An array of paths not needed in production that
bower - 安装 bower 包 : "no-json No bower.json file to save to"
我已经在我的项目根目录中添加了一个 bower 包。我正在使用 bower，因此可以更轻松地管理每个组件的更新(bower 的功能之一)。但是我在安装后收到了这条消息: no-json No bowe
bower - 为什么 bower 安装 github/repo 不会克隆我的 bower.json？
当我通过以下方式从 git repo 安装库时: bower install git@github.com:fabiantheblind/p5.js.git --save 该组件被克隆到我的 bowe
bower - nexus bower 注册表下载到错误的位置
我已经为 Bower 设置了一个 Nexus 代理注册表。我正在使用 Debian 9。bower 版本是 1.8.8，安装了 bower-nexus3-resolver(版本 1.0.4)。我的 .
Bower - 我应该为 bower 和开发创建一个单独的存储库吗？
是否可能只有一个可以从 Bower“安装”的存储库？目前我已经注册了一个连接到开发库的 bower 包，但是在运行时 bower install我只想要 dist要下载的文件。我见过有人保留两个存
bower - 如何安装名称中带有斜杠的 bower 包？
我正在尝试安装 https://github.com/aterrien/jQuery-Knob通过 bower 。在包的 bower.json 文件中，我看到: { "name": "aterrien
bower - 如何在 bower 中本地安装包？
我正在尝试通过 bower 安装本地 Jquery ui。我有一个名为 jquery-ui 的本地文件夹并运行了以下命令 bower install jquery-ui/jquery-ui.min.
bower - 如何告诉 bower 在哪里安装软件包？
我正在研究如何使用 bower 安装软件包。当我 'bower install packagename' 时，软件包安装在/app/components/中。但是，我想自己决定项目的结构。有没有
bower - 为什么安装时 bower 挂了？
$ bower install angular-animate --save bower cached git://github.com/angular/bower-angular-animate.g
bower - 如何知道何时使用 bower 的新软件包版本？
我正在使用 bower 从下面的 bower.json 中查看依赖项，所以问题是我希望 bower 提供更新版本发布的依赖项报告但不安装它，对于使用 npm-check-updates for npm
bower - 在 bower 中安装没有预构建文件的库的解决方案
一些库在其 Github 存储库中没有已经构建的 JavaScript 文件，因为这些库的作者反对保留构建工件(例如 Sinon.JS)。是否有使用 Bower 处理此问题的首选方法？我知道我可以
bower - 如何运行我自己的 bower 服务器
我想运行我自己的 bower 服务器来开始跨团队共享几个内部模块。我很难找到运行您自己的服务器的信息。在 bower.io 网站上有这条线 N.B. To run your own Bower End
bower - 如何更改 Bower 的默认缓存文件夹？
在 *nix 上，bower 使用 ~/.bower其缓存的文件夹(包等)。我想将其更改为其他位置。 bower spec来自的文档建议我配置 storage输入我的.bowerrc . 我在我的项
bower - 递归 bower 安装
我有一个项目依赖于另一个使用 Bower 的项目。我要 bower install当我在父项目上运行它时也运行在该组件上。到目前为止，我还没有在 configuration spec 中找到任何东西，
bower - 如何使用具有访问受限依赖项的 Bower 包管理器
如何在不提供 bower.json 中的用户凭据的情况下将访问受限存储库作为依赖项添加到 bower.json？即我想避免像这样指定它: { "dependencies": { "ang
bower - 为什么要检查 bower 组件？
Bower 文档说 N.B. If you aren't authoring a package that is intended to be consumed by others (e.g., yo
bower - 永久忽略与 Bower 的依赖关系
我正在下载 Angular、Angular-Bootstrap 和 Bootstrap with Bower。 Bootstrap 依赖于进程中安装的 jquery。但我的项目中不需要它，因为我只使用
bower - 阻止 Bower 在安装时询问统计信息
我正在尝试为使用 Bower 的应用程序设置自动包构建。 postinstall中进入bower install时，bower提示: [?] May bower anonymously report
bower - 使用 Bower 指定特定分支的最新版本
我想将特定分支的最新版本指定为依赖项。具体来说，我想在 Bootstrap v3.0 发布之前使用它。将其指定为 Bower 中的依赖项的最佳方法是什么？最佳答案您需要使用#、appended

首页

博学

6Ren·AI

商城

node.js - 带有 grunt 的 Concat bower 组件