angularjs – 如何配置Grunt来替换Bower依赖的缩微版本

发布时间：2020-12-17 08:37:46 所属栏目：安全来源：网络整理

导读：我是新来的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文件中，我使用这些库的非精简版本

我是新来的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'
      ]
    }]
  }
}

您使用的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']
},

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!