使用 Gulpjs 编译 Zurb Foundation 部分答案

【问题标题】：Compiling Zurb Foundation partials with Gulpjs使用 Gulpjs 编译 Zurb Foundation 部分
【发布时间】：2015-05-14 12:32:06
【问题描述】：

我正在使用 Zurb 的 Foundation 5 构建一个自定义 Wordpress 主题，并使用 Gulpjs 编译它，速度非常快。我在我的 WP 主题文件夹中安装了 Gulpjs，每次我完美保存它时它都会编译我的 app.scss 文件。但是，如果我对 Foundation 中包含的任何 Sass 部分进行任何更改，Gulp 不会自动编译它们，直到我对 app.scss 进行更改并再次保存 app.scss。

当我对部分内容或主题中包含的任何其他 .scss 文件进行更改时，是否有一种方法可以在我保存它们时自动编译？

这是我正在使用的入门主题的链接，显示了我正在使用的所有文件。 gulpfile.js 可以在根文件夹中找到。

https://github.com/schikulski/gromf

谢谢！！

【问题讨论】：

标签： wordpress sass zurb-foundation gulp

【解决方案1】：

想通了！如果有人需要类似的帮助。

我加了

'bower_components/foundation/scss/foundation/components/_*.scss'

到 gulpfile.js

gulp.task('sass', function (){
    gulp.src([
        'bower_components/foundation/scss/normalize.scss',                
        'bower_components/foundation/scss/foundation/components/_*.scss',
        'assets/scss/app.scss'])                                         
        .pipe(sass({style: 'compressed', errLogToConsole: true}))         
        .pipe(concat('main.css'))                                         
        .pipe(rename({suffix: '.min'}))                                   
        .pipe(minifycss())                                                
        .pipe(gulp.dest('assets/css/'))                                   
        .pipe(livereload());                                              
        util.log(util.colors.yellow('Sass compiled & minified'));         
});

【讨论】：

【解决方案2】：

您是否尝试将'bower_components/foundation/scss/foundation/foundation.scss' 添加到您的来源？这是包含所有@import 的基础文件。

【讨论】：

啊，我看到您可能正在尝试将它与gulp.watch 一起使用，以便您可以实际检测到更改。我的设置有 2 个不同的任务，一个用于常规构建，另一个用于观看所有部分。