angularjs - 如何配置 Grunt 以通过缩小版本替换 Bower 依赖项

标签 angularjs gruntjs yeoman bower

我是 Yeoman/Grunt/Bower 的新手。我有一个 bower.json定义以下依赖项的文件:

bower.json

{
    "dependencies": {
        "angular": "~1.0.7",
        "jquery": "~1.8.0",
        "bootstrap": "~2.3.2",
        "angular-grid": "~2.0.5"
    }
}

在我的 html 文件中,我使用了这些库的非缩小版本,我通过命令 bower install 安装了这些库。

index.html
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>

如何配置 grunt,它将:
  • 仅将这些 js 文件的缩小版本复制到构建目录
  • 替换 HTML,以便它会改变,例如jquery.jsjquery.min.js
  • 不使用 CDN 时 - 是否建议将所有文件与自定义应用程序脚本组合在一起?

  • 这里的正确方法是什么?我是否必须在 grunt 复制任务中定义每个库?像:

    Gruntfile.js:
    copy: {
      dist: {
        files: [{
          src: [
            'components/jquery/jquery.min.js',
            'components/bootstrap/docs/assets/js/bootstrap.min.js',
            'components/angular/angular.min.js',
            'components/angular-grid/build/ng-grid.min.js'
          ]
        }]
      }
    }
    

    最佳答案

    您正在使用的 JavaScript 库的缩小版本最终不会随 Bower 模块一起提供。缩小和连接不是包管理器负责的事情,而是您的构建管道。

    Yeoman ,推荐的方式是使用grunt-usemin ,它将处理所有必要的步骤。在使用 yo webapp 搭建新应用程序时,您可以看到这样的示例。并查看生成的 Gruntfile.jsindex.html .

    在您的情况下,您需要在脚本周围添加注释,包括:

    <!-- build:js scripts/main.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
    <script src="components/angular/angular.js"></script>
    <script src="components/angular-grid/build/ng-grid.js"></script>
    <!-- endbuild -->
    

    并确保在您的 Grunt 管道中有相应的 usemin 任务:
    useminPrepare: {
        options: {
            dest: 'dist'
        },
        html: 'app/index.html'
    },
    usemin: {
        options: {
            dirs: ['dist']
        },
        html: ['dist/{,*/}*.html'],
        css: ['dist/styles/{,*/}*.css']
    },
    

    关于angularjs - 如何配置 Grunt 以通过缩小版本替换 Bower 依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16761272/

    相关文章:

    javascript - 有没有一种优雅的方式将 npm run 选项传递给 grunt 选项

    javascript - 如何使用 Grunt 丑化子文件夹/子目录中的所有 javascript 文件?

    javascript - 如何在没有服务器组件的情况下使用 Angular-fullstack?

    javascript - 在我的例子中,如何获取 Select 元素中的选定值?

    javascript - dc.js 重新选择已渲染的图表

    node.js - Mean.IO + Heroku 构建失败错误 : ENOENT, 没有这样的文件或目录 '/app/bower_components/jquery/dist/jquery.min.map'

    node.js - 在 Yeoman 中使用 Node.js 的 module.exports 会产生不同的结果

    cordova - 当我运行命令 "ReferenceError : ionic is not defined"时如何修复 `ionic serve --lab`?

    javascript - ng-repeat 包含具有相似键值的内部数组的数据的数组会分组在一起吗?

    angularjs - 带有 AngularJS 的 Google 登录按钮