Question

ZURB Foundation提供了几个JS插件，如Abide，Equalizer，Toggler，Sticky等......

当我创建网站时，我可能不需要所有这些网站。根据我的网络研究，Foundation 6提供了位于foundation-sites / dist / js / plugins中的单个插件js文件。较新版本的Foundation使用了我并不熟悉的Webpack语法。

问题： 如何将一组选定的Foundation JS插件转换为＆＃34; normal＆＃34;使用GULP的JavaScript / jQuery。

Answer 1

您可以使用其中一个模板并查看其自定义配置。

https://github.com/zurb/foundation-zurb-template/tree/master/src/assets/js

https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/js/lib/foundation-explicit-pieces.js

只有Abide插件的一个小例子看起来与此类似：

import $ from 'jquery';
import { Foundation } from 'foundation-sites/js/foundation.core';
import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
import { Box } from 'foundation-sites/js/foundation.util.box'
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
import { Nest } from 'foundation-sites/js/foundation.util.nest';
import { Timer } from 'foundation-sites/js/foundation.util.timer';
import { Touch } from 'foundation-sites/js/foundation.util.touch';
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
import { Abide } from 'foundation-sites/js/foundation.abide';


Foundation.addToJquery($);

// Add Foundation Utils to Foundation global namespace for backwards
// compatibility.

Foundation.rtl = rtl;
Foundation.GetYoDigits = GetYoDigits;
Foundation.transitionend = transitionend;

Foundation.Box = Box;
Foundation.onImagesLoaded = onImagesLoaded;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;
Foundation.Timer = Timer;

// Touch and Triggers previously were almost purely sede effect driven,
// so no // need to add it to Foundation, just init them.

Touch.init($);

Triggers.init($, Foundation);

Foundation.plugin(Abide, 'Abide');

module.exports = Foundation;

与Gulp一起使用的Transpile Foundation 6 JS插件（Webpack）

1 个答案: