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

一尘不染

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

angularjs

我是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.js至jquery.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'
      ]
    }]
  }
}

阅读 226

2020-07-04

共1个答案

一尘不染

您使用的JavaScript库的精简版最终将不会随Bower模块一起提供。最小化和串联不是包管理器负责的事情，而是构建管道。

对于Yeoman，推荐的方法是使用grunt-
usemin，它将处理所有必要的步骤。在使用搭建新应用yo webapp并查看生成的Gruntfile.js和时，您可以看到一个示例index.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']
},

2020-07-04