在使用grunt和dist项目文件夹开发和部署时如何管理bower依赖项?

时间:2015-05-22 12:42:46

标签: javascript gruntjs bower grunt-wiredep

我正在尝试使用bower依赖项设置一个Grunt项目,其中包含两项任务:开发部署。项目文件夹结构目前如下所示:

.
├── bower_components
│   ├── animate.css
│   ├── jquery
│   ├── semantic-ui
│   └── wow
├── dist
│   └── assets
│       ├── styles
│       └── js
├── node_modules
└── src
    └── assets
        ├── less
        └── js

我目前正在使用grunt-wiredepdist的HTML文件中自动包含bower依赖项。我试图将bower_components保留在dist文件夹之外,以保持开发和部署的分离(即使在开发过程中,网站是从dist提供的)。

由于我是新手,我在制定正确的咕噜/凉亭模块以及开发和部署的最佳实践方面有一个完全的想象失败(是的Yeoman负责很多这个,但我正在努力学习) 。我目前的愿景是:

  1. Connect提供dist文件夹中的HTML页面。
  2. 在开发中,bower组件将自动包含在页面(wiredep)中,但需要在dist文件夹(grunt-wiredep-copy)内提供。
  3. 在部署中,bower组件将获取缩小版本并将它们与项目JS和CSS文件或仅在单个JS和CSS文件中的bower组件连接起来。
  4. 我的问题是:在开发和使用最小grunt-contrib-copy / grunt-contrib-concat / {{3}进行目标的情况下,使用bower组件的好方法是什么?或者这样的模块来移动文件并重写HTML引用?或者这个步骤总是会有一个很高的手动元素 - 这对我来说似乎很奇怪,因为凉亭和咕噜声像肯德基筹码和'马铃薯和肉汁'一样。

    JS和LESS / CSS连接很容易,每种类型都有各自的uglify和minify grunt模块。 Bower文件被排除在这些进程之外,并且wiredep和wiredepCopy似乎没有为部署任务提供一种简单的方法来“清理”(缩小/连接和更新HTML文件中的相应链接)。 wiredepCopy甚至不会在开发任务期间将HTML中的引用更新为移动文件,这对我来说似乎很奇怪(并且请求Pull请求)。也许wiredep不是前进的方向?谢谢!

1 个答案:

答案 0 :(得分:0)

不是严格意义上的答案,但对我而言,这不再是一个问题 - 前端发展继续前进。

解决方案不使用Grunt和Bower - 请改用npmWebpack。 Bower通过帮助keep control of the exact assets and versions that are built in the front end与其他包管理器/构建汇编程序不同。不再需要这个恕我直言。

在新的(和改进的)堆栈中,npm下拉资产,Webpack使您可以轻松地将应用程序分割成单独的构建文件,以最小化文件大小。只需要在JS中导入/导入所需的前端模块,Webpack就可以为您进行组合。

npm和webpack的组合接管了Grunt(阅读Gulp,Broccoli等等)实现的大多数(如果不是全部)功能。