如何在使用grunt和dist项目文件夹进行开发和部署时管理鲍尔依赖关系？ [英] How to manage bower dependencies when developing and deploying with grunt and a dist project folder?

问题描述

我正在尝试通过两项任务来建立一个具有bower依赖项的Grunt项目：开发和部署。项目文件夹结构目前如下所示：

 。 
├──bower_components 
│├──animate.css 
│├──jquery 
│├──semantic-ui 
│└──哇
├──dist 
│└──资产
│├──风格
│└──js 
├──node_modules 
└──src 
└──资产
├──减
└──js 
  

我目前使用 grunt-wiredep 自动将bower依赖关系包含在 DIST 。我试图将 bower_components 保留在 dist 文件夹中，以保持开发和部署的分离（即使在开发该网站是从 dist ）。

因为我是新手，我有一个完整的想象失败在制定正确的Grunt / Bower模块以及开发和部署的最佳实践（是的，Yeoman负责很多这方面的工作，但我正在努力学习）。我目前的愿景是：

1. Connect从 dist 文件夹提供HTML页面。 在开发中，bower组件将自动包含在页面中（wiredep），但需要从 dist 文件夹（< a href =https://www.npmjs.com/package/grunt-wiredep-copy =nofollow> grunt-wiredep-copy ）。


2. 在部署中，bower组件将获取最小化版本，并将它们与项目JS和CSS文件连接起来，或者将它们与单个JS和CSS文件中的bower组件连接。

我的问题是：在最小化 grunt-contrib-copy / grunt-contrib-concat / grunt-string-replace 或这些模块来移动文件并重写HTML引用？或者这个步骤总是会有一个很高的手动元素 - 这让我感到很奇怪，因为像肯德基芯片和'马铃薯和肉汁'一样的凉亭和咕噜一起走。

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

解决方案

不是严格的答案，但对我来说，这已不再是问题 - 前端开发继续进行。 >

解决方案不使用Grunt和Bower - 使用 npm 和 Webpack 。 Bower不同于其他软件包管理器/构建汇编器，通过帮助你保留对前端内置的确切资产和版本的控制权限。这个恕我直言不再需要。

在新的（和改进的）堆栈中，npm拉下资产，Webpack使您能够轻松地将应用程序分割成单独的内置文件最小化文件大小。只需要在您的JS中需要/导入所需的前端模块，而Webpack则为您提供了组合。

npm和webpack的结合占据了大部分（如果不是全部） Grunt（阅读Gulp，Broccoli等等）的功能。

I am trying to set up a Grunt project with bower dependencies with two tasks: development and deploy. The project folder structure currently looks like this:

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

I am currently using grunt-wiredep to automagically include the bower dependencies in the HTML files in dist. I am trying to keep the bower_components out of the dist folder to keep a separation of development and deploy (even though during development the site is served from dist).

As I am new to this I am having a complete imagination failure in working out the right grunt/bower modules and best practice for developing and deploying (yes Yeoman takes care of a lot of this, but I am trying to learn). My current vision is:

1. Connect serves the HTML pages from the dist folder.
2. In development bower components would be automatically included in the page (wiredep) but need to be served from within the dist folder (grunt-wiredep-copy).
3. In deploy the bower components will grab the minified versions and concatenate them with either the project JS and CSS files, or just the bower components in a single JS and CSS file.

My question is: what is the (or a) good way to use bower components in development and deploy targets with minimal grunt-contrib-copy/grunt-contrib-concat/grunt-string-replace or such modules to move files around and rewrite HTML references? Or will this step always have a high manual element to it - which seems odd to me given bower and grunt go together like KFC chips and 'potato and gravy'.

JS and LESS/CSS concatenation is easy with each types respective uglify and minify grunt modules. Bower files are excluded from these processes and wiredep and wiredepCopy don't appear to provide a simple way to "clean up" (minify/concatenate and update the respective links in HTML files) for the deploy task. wiredepCopy doesn't even update references in the HTML during the development task to the moved files which seems odd to me (and begging for a Pull Request). Maybe wiredep is not the way forward? Thanks!

解决方案

Not strictly an answer but for me this is no longer an issue - front end development moved on.

The solution is not using Grunt and Bower - use npm and Webpack instead. Bower differs from other package managers/build assemblers by helping you keep control of the exact assets and versions that are built in the front end. This IMHO is no longer necessary.

In the new (and improved) stack, npm pulls down the assets and Webpack enables you to easily slice up your app into separate built files to minimise file size. Simply require/import the required front end modules in your JS and Webpack does the combining for you.

The combination of npm and webpack take over most (if not all) of the functionality which Grunt (read Gulp, Broccoli et cetera) fulfilled.

这篇关于如何在使用grunt和dist项目文件夹进行开发和部署时管理鲍尔依赖关系？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！