如何编译 Foundation 源文件？答案

【问题标题】：How to compile Foundation source files?如何编译 Foundation 源文件？
【发布时间】：2021-10-07 04:51:13
【问题描述】：

我想编译一个“精简版”的 Foundation 框架。

我从基础站点 GitHub 存储库 (https://github.com/zurb/foundation-sites) 下载了“scss”和“js”文件夹，并创建了以下 Gulp 任务：

gulp.task('foundationCss', function(cb) {
  return gulp.src('foundation/scss/foundation.scss')
             .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
             .pipe(autoprefixer('last 2 version'))
             .pipe(gulp.dest(paths.dist + '/styles'));
});

gulp.task('foundationJs', function() {
  return gulp.src(['foundation/js/foundation.core.js',
                   'foundation/js/foundation.util.*.js',
                   'foundation/js/*.js'])
             .pipe(concat('foundation.min.js'))
             .pipe(minifyJs())
             .pipe(gulp.dest(paths.dist + '/scripts'));
});

这是完成这项工作的正确方法吗？我认为出了点问题，因为我遇到了一些布局问题。例如，我在最新的 Foundation 6 (http://codepen.io/anon/pen/kXOmPA) 和 "my" Foundation 6 (http://codepen.io/anon/pen/jAgQvL) 上使用了“topbar”html 的不同输出。

我的 Gulp 任务出了什么问题？

【问题讨论】：

标签： sass gulp zurb-foundation

【解决方案1】：

对于 CSS，您需要包含 Autoprefixer。对于 JavaScript，如果您希望您的网站在 Safari、InternetExplorer 和 Edge（不支持或有限支持 ES2015 的浏览器）中运行，则需要包含 Babel。

看看：http://foundation.zurb.com/sites/docs/javascript.html 用于 JavaScript 设置，http://foundation.zurb.com/sites/docs/sass.html 用于 CSS 设置。

【讨论】：