如何使用Gulp将选定的Foundation 6 JS插件转译为标准JavaScript/jQuery

嘿，我来帮你搞定这个问题！Foundation 6之后确实切换到了Webpack风格的模块系统，但用Gulp提取并转译你需要的特定JS插件完全可行，下面是清晰的操作步骤：

首先得确保你的项目里已经安装了基础工具和相关包，打开终端运行这些命令：

# 安装Gulp核心工具（如果还没装全局Gulp，先装全局的）
npm install gulp-cli -g
npm install gulp --save-dev

# 安装Babel相关依赖，用于转译ES6+到兼容的ES5
npm install @babel/core @babel/preset-env gulp-babel --save-dev

# 安装webpack-stream，用来处理Foundation的模块依赖
npm install webpack-stream vinyl-named --save-dev

# 当然，得先安装Foundation本身
npm install foundation-sites --save

在项目根目录创建gulpfile.js，把下面的代码放进去——我已经帮你写好了核心逻辑，你只需要调整你要的插件列表就行：

const gulp = require('gulp');
const babel = require('gulp-babel');
const webpack = require('webpack-stream');
const named = require('vinyl-named');

// 自定义你需要的Foundation插件列表
const selectedPlugins = [
  './node_modules/foundation-sites/js/plugins/abide.js',
  './node_modules/foundation-sites/js/plugins/equalizer.js',
  './node_modules/foundation-sites/js/plugins/toggler.js',
  './node_modules/foundation-sites/js/plugins/sticky.js'
];

// 别忘了Foundation的核心模块，所有插件都依赖它
selectedPlugins.unshift('./node_modules/foundation-sites/js/foundation.core.js');

gulp.task('build-foundation-plugins', function() {
  return gulp.src(selectedPlugins)
    .pipe(named()) // 保留原文件名输出
    .pipe(webpack({
      mode: 'production', // 生产环境会压缩代码，开发环境用'development'
      output: {
        filename: '[name].js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
      },
      externals: {
        jquery: 'jQuery' // 告诉Webpack jQuery是外部依赖，不用打包进去，页面里自己引入
      }
    }))
    .pipe(gulp.dest('./dist/js/foundation-plugins')); // 输出目录，你可以自己改
});

// 默认任务，运行build-foundation-plugins
gulp.task('default', gulp.series('build-foundation-plugins'));

终端里输入：

gulp

等任务跑完，你就能在dist/js/foundation-plugins目录下拿到转译好的标准JS文件了——每个插件都是独立的，而且已经处理了模块依赖。

在HTML里按顺序引入（注意先引入jQuery！）：

<!-- 先引入jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 然后引入Foundation核心 -->
<script src="dist/js/foundation-plugins/foundation.core.js"></script>
<!-- 最后引入你需要的插件 -->
<script src="dist/js/foundation-plugins/abide.js"></script>
<script src="dist/js/foundation-plugins/equalizer.js"></script>

<!-- 初始化Foundation -->
<script>
  $(document).foundation();
</script>

• 依赖顺序：一定要先引入foundation.core.js，所有其他插件都依赖它；如果某个插件还有额外依赖（比如Sticky可能用到foundation.util.motion.js），记得把依赖的模块也加入selectedPlugins列表里。
• 开发/生产模式：上面的Webpack配置用了production模式，会自动压缩代码；如果是开发阶段，改成development模式，代码更易读，方便调试。
• jQuery版本：Foundation 6需要jQuery 2.2.4或更高版本，别用太老的jQuery哦。

内容的提问来源于stack exchange，提问作者EmWe