Question

刚刚下载了Foundation 6.2.3，准备从5.5迁移项目。有关如何创建自定义foundation.css文件以包含我需要的组件的相当简单明了的说明，但创建自定义foundation.js文件的情况并非如此。 dists/方向的那个包含所有用于基础的JavaScript代码，即使我没有使用给定的组件。

起初我认为这是plugins/目录中各种较小的Javascript文件的简单连接，但似乎并非如此。例如，在dists/foundation.js的顶部是看起来像plugins/foundation.core.js的内容可疑的东西，但存在差异。例如，foundation.js的版本为6.2.3，而foundation.core.js的版本为6.2.2。删除似乎已插入foundation.js的前导空格然后对foundation.core.js进行差异会产生一些差异。很明显，构建foundation.js所需的组件不包含在默认源中。

我真的希望能够在我的最小foundation.js文件中构建一个最小foundation.css。任何帮助非常感谢。谢谢。

Answer 1

我正在使用Foundation 6.2.4 各种javascript文件的正确加载顺序应为：

foundation.core.js            
foundation.util.box.js    
foundation.util.keyboard.js    
foundation.util.mediaQuery.js                    
foundation.util.motion.js                            
foundation.util.nest.js        
foundation.util.timerAndImageLoader.js    
foundation.util.touch.js    
foundation.util.triggers.js                                                        
foundation.abide.js    
foundation.accordion.js    
foundation.accordionMenu.js            
foundation.drilldown.js    
foundation.dropdown.js    
foundation.dropdownMenu.js            
foundation.equalizer.js    
foundation.interchange.js    
foundation.magellan.js    
foundation.offcanvas.js    
foundation.orbit.js    
foundation.responsiveMenu.js    
foundation.responsiveToggle.js    
foundation.reveal.js    
foundation.slider.js    
foundation.sticky.js            
foundation.tabs.js    
foundation.toggler.js        
foundation.tooltip.js

这些是各种功能（依赖项）所需的文件：

accordion:
  foundation.util.keyboard.js
  foundation.util.motion.js

accordionMenu:
  foundation.util.keyboard.js    
  foundation.util.motion.js    
  foundation.util.nest.js

drilldown:
      foundation.util.keyboard.js    
      foundation.util.motion.js    
      foundation.util.nest.js

dropdownMenu:
      foundation.util.keyboard.js    
      foundation.util.motion.js    
      foundation.util.box.js    
      foundation.util.nest.js

dropdown:
      foundation.util.keyboard.js    
      foundation.util.box.js    
      foundation.util.triggers.js

interchange:
      foundation.util.triggers.js    
      foundation.util.timerAndImageLoader.js

magellan:
      foundation.util.motion.js

offcanvas:
      foundation.util.motion.js    
      foundation.util.triggers.js

orbit:
      foundation.util.motion.js    
      foundation.util.timerAndImageLoader.js    
      foundation.util.keyboard.js    
      foundation.util.touch.js

responsiveMenu:
      foundation.util.triggers.js    
      foundation.util.mediaQuery.js    
      foundation.accordionMenu.js    
      foundation.drilldown.js    
      foundation.dropdownMenu.js    
      foundation.util.nest.js

responsiveToggle:
      foundation.util.mediaQuery.js

reveal:
      foundation.util.box.js    
      foundation.util.motion.js    
      foundation.util.triggers.js    
      foundation.util.mediaQuery.js

slider:
      foundation.util.triggers.js    
      foundation.util.motion.js    
      foundation.util.keyboard.js    
      foundation.util.touch.js

sticky:
      foundation.util.triggers.js    
      foundation.util.mediaQuery.js

tabs:
      foundation.util.keyboard.js    
      foundation.util.timerAndImageLoader.js

toggler:
      foundation.util.motion.js

tooltip:
      foundation.util.box.js    
      foundation.util.triggers.js    
      foundation.util.mediaQuery.js    
      foundation.util.motion.js

motion-ui:
      foundation.util.motion.js

请注意，为了使最终文件正常工作，您必须：

1）连接它们

2）使用Babel＆＃34;编译＆＃34;连接文件（预设：es2015）

3）uglify it

如何创建一个最小的foundation.js文件

1 个答案: