开发工作流程 - Bootstrap（更少），Bower和Grunt

问题描述

就我的文件夹结构和工作流程而言，我正在尝试加强我的游戏。我最近发现前端包管理和任务自动化是提高速度，缩短开发时间，减小文件大小和增加利润的关键。

我的问题是我不太确定使用这些工具的最佳方法是什么。我有一个builds文件夹，其中包含一个dev和prod文件夹。我的组件位于bower_components文件夹中的此文件夹之外。

我通常会定制bootstrap并利用它的变量文件和mixins。我复制了bootstrap.less文件和variables.less文件，并将它们放置在build-> dev-> less中。然后，我使用这个新目录中的bootstrap.less文件编译得更少。

这是使用引导程序的最佳方式，它在此设置中的文件较少？我想使用鲍尔由于它的力量，但我也想保持自定义引导的权力，它是少文件。

你们认为什么？

注意：我通常会为小册子网站和非常小的应用程序编写主题代码。

解决方案

您不必复制bootstrap.less和variables.less。较少使用延迟加载和最后一次声明为变量获胜，因此可以在之后将它们的定义用于（重新）分配它们。创建一个project.less文件@import从你的bower文件夹中引导bootstrap.less，并在@import之后放置你的自定义变量赋值，混合和代码。

I am trying to step up my game as far as my folder structure and workflow is considered. I have recently discovered that front end package management and automation of tasks are key to improve speed, decreasing dev time, decrease file size and increase profit.

My issue is I am not too sure what the best method of using these tools are. I have a builds folder, which includes a dev and prod folder. My components are outside this folder in the bower_components folder.

I usually customise bootstrap and take advantage of it's variables file and mixins. I have copied the bootstrap.less file, and the variables.less file, and placed them in builds->dev->less. I then have grunt compiling the less using the bootstrap.less file from this new directory.

Is this the best way to go about using bootstrap and it's less files in this setup? I want to use bower due to it's power, but I also want to keep the power of customising bootstrap and it's less files.

What do you guys think?

NB: I usually code themes for brochure websites and very small applications.

解决方案

As posted above by Bass Jobsen:

you don't have to copy bootstrap.less and variables.less. Less uses lazy loading and last declaration wins for variables, so to can put their definition afterwards to (re)assign them. Create a project.less file which @imports bootstrap.less from your bower folder and put your custom variables assignments, mixins, and code after the @import

这篇关于开发工作流程 - Bootstrap（更少），Bower和Grunt的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！