使用 Bourbon & Neat 与 Gulp

我一直听说关于 Gulp、Bourbon 和 Neat 的好消息，所以我决定在一个项目中尝试一下它们。在头疼了感觉像是永远之后，我决定写一篇小文章来展示如何将它们整合在一起。

#步骤 1 – 安装 NPM 包

运行以下命令以获取所有需要的包。我通常会包含 `-S` 标志，以便将这些包存储在我的 `package.json` 文件中，但这并不是必需的。

npm install gulp
npm install gulp-sass
npm install node-neat
npm install node-bourbon

#步骤 2 – 导入 Bourbon

在您的主 Sass 文件（我的文件名为 style.scss）中，导入所需的文件

@import "bourbon";
@import "neat";

请注意，您不需要添加前缀或使用完整路径。

#步骤 3 – 设置 Gulp

现在您需要创建一个 `Gulpfile.js` 文件，并包含以下内容

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    neat = require('node-neat').includePaths;
 
var paths = {
    scss: './assets/sass/*.scss'
};
 
gulp.task('styles', function () {
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ['styles'].concat(neat)
        }))
        .pipe(gulp.dest('./public/css'));
});
 
gulp.task('default',function(){
    gulp.start('styles');
});

顶部和 `styles` 任务中的 `includePaths` 都是我最常遇到问题的区域。我花了很多时间寻找这些信息，并想分享一下，以防其他人也想要整合这些工具。现在看起来它很简单，但这就是这些事情的运作方式。

如果您有更好的方法或发现我遗漏了什么明显的错误，请随时反馈。