如何配置咕噜其缩小的版本替换鲍尔依赖 [英] How to configure Grunt to replace Bower dependencies by its minified versions

问题描述

我是新来的约曼/步兵/鲍尔。我有一个 bower.json 文件定义了如下依赖关系：

bower.json

  {
    依赖：{
        角度：〜1.0.7，
        jQuery的：〜1.8.0
        引导：〜2.3.2
        角网格：〜2.0.5
    }
}
 

在我的HTML文件中我使用这些库的非缩小的版本，这是我通过命令亭子安装

安装

的index.html

 ＆LT;脚本SRC =组件/ jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =组件/引导/文档/资产/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =组件/角/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =成分/角度网格/建设/ NG-grid.js＆GT;＆LT; / SCRIPT＆GT;
 

如何配置的呼噜声，所以它会：

1. 复制只有那些js文件的版本精缩到构建目录


2. 替换HTML所以它会改变例如的jquery.js 到 jquery.min.js


3. 当不使用CDN的 - 被推荐给所有文件与自定义应用程序脚本结合在一起
？

什么是正确的做法吗？难道我有一个咕噜副本任务来定义每个LIB？这样的：

Gruntfile.js：

 副本：{
  距：{
    文件：[{
      SRC：
        组件/ jQuery的/ jquery.min.js'，
        组件/引导/文档/资产/ JS / bootstrap.min.js'，
        组件/角/ angular.min.js'，
        组件/角度网格/建设/ NG-grid.min.js
      ]
    }]
  }
}
 

解决方案

你使用最终将无法与鲍尔模块发货JavaScript库的精缩版。涅槃和连接是不是包经理负责，但您的构建管道。

使用约曼，推荐的方法是使用咕噜-usemin ，将采取一切必要的步骤照顾。脚手架出来的时候用哟web应用程序一个新的应用程序，并采取一看生成你可以看到这样一个例子 Gruntfile.js 和 index.html的。

在你的情况，你需要添加评论你的周围包括脚本：

 ＆LT;  - 编译：JS脚本/ main.js  - ＆GT;
＆LT;脚本SRC =组件/ jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =组件/引导/文档/资产/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =组件/角/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =成分/角度网格/建设/ NG-grid.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;
 

和确保有相应的usemin任务的步兵管道：

  usemin prepare：{
    选项​​：{
        DEST：DIST
    }，
    HTML：应用程序/ index.html的
}，
usemin：{
    选项​​：{
        迪尔斯：'DIST']
    }，
    HTML：'DIST / {* /} * HTML。]
    CSS：'DIST /风格/ {* /} * CSS。']
}，
 

I am new to Yeoman/Grunt/Bower. I have a bower.json file that defines the following dependencies:

bower.json

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

In my html file I am using the non-minified versions of those libraries, which I installed via the command 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>

How can I configure grunt, so it will:

1. Copy only the minified versions of the those js files to the build directory
2. Replace the HTML so it will change e.g. jquery.js to jquery.min.js
3. When not using CDNs - is it recommend to combine all the files together with the custom application script?

What is the right approach here? Do I have to define each lib in a grunt copy task? Like:

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'
      ]
    }]
  }
}

解决方案

Minified versions of the JavaScript libraries you're using will eventually not be shipped with Bower modules. Minifying and concatenating is not something the package manager is responsible for, but your build pipeline.

With Yeoman, the recommended way is to use grunt-usemin, which will take care of all the necessary steps. You can see an example of this when scaffolding out a new app with yo webapp and taking a look at the generated Gruntfile.js and index.html.

In your case, you would need to add a comment around your script includes:

<!-- 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 -->

And make sure to have the corresponding usemin tasks in your Grunt pipeline:

useminPrepare: {
    options: {
        dest: 'dist'
    },
    html: 'app/index.html'
},
usemin: {
    options: {
        dirs: ['dist']
    },
    html: ['dist/{,*/}*.html'],
    css: ['dist/styles/{,*/}*.css']
},

这篇关于如何配置咕噜其缩小的版本替换鲍尔依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！