我正在尝试使用bower依赖项设置一个Grunt项目,其中包含两项任务:开发和部署。项目文件夹结构目前如下所示:
.
├── bower_components
│ ├── animate.css
│ ├── jquery
│ ├── semantic-ui
│ └── wow
├── dist
│ └── assets
│ ├── styles
│ └── js
├── node_modules
└── src
└── assets
├── less
└── js
我目前正在使用grunt-wiredep在dist
的HTML文件中自动包含bower依赖项。我试图将bower_components
保留在dist
文件夹之外,以保持开发和部署的分离(即使在开发过程中,网站是从dist
提供的)。
由于我是新手,我在制定正确的咕噜/凉亭模块以及开发和部署的最佳实践方面有一个完全的想象失败(是的Yeoman负责很多这个,但我正在努力学习) 。我目前的愿景是:
dist
文件夹中的HTML页面。dist
文件夹(grunt-wiredep-copy)内提供。我的问题是:在开发和使用最小grunt-contrib-copy / grunt-contrib-concat / {{3}进行目标的情况下,使用bower组件的好方法是什么?或者这样的模块来移动文件并重写HTML引用?或者这个步骤总是会有一个很高的手动元素 - 这对我来说似乎很奇怪,因为凉亭和咕噜声像肯德基筹码和'马铃薯和肉汁'一样。
JS和LESS / CSS连接很容易,每种类型都有各自的uglify和minify grunt模块。 Bower文件被排除在这些进程之外,并且wiredep和wiredepCopy似乎没有为部署任务提供一种简单的方法来“清理”(缩小/连接和更新HTML文件中的相应链接)。 wiredepCopy甚至不会在开发任务期间将HTML中的引用更新为移动文件,这对我来说似乎很奇怪(并且请求Pull请求)。也许wiredep不是前进的方向?谢谢!
答案 0 :(得分:0)
不是严格意义上的答案,但对我而言,这不再是一个问题 - 前端发展继续前进。
解决方案不使用Grunt和Bower - 请改用npm和Webpack。 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等等)实现的大多数(如果不是全部)功能。