Почему не работает node-bourbon в gulp с scss?

Question

[Максим]

Не могу подключить node-bourbon.
Вот мой gulpfile.js

var gulp         = require('gulp'),
		sass         = require('gulp-sass'),
		autoprefixer = require('gulp-autoprefixer'),
		minifycss    = require('gulp-minify-css'),
		rename       = require('gulp-rename'),
		browserSync  = require('browser-sync').create(),
		concat       = require('gulp-concat'),
		uglify       = require('gulp-uglifyjs'),
		bourbon      = require('node-bourbon');

gulp.task('browser-sync', ['styles', 'scripts'], function() {
		browserSync.init({
				server: {
						baseDir: "./app"
				},
				notify: false
		});
});

gulp.task('styles', function () {
	return gulp.src('scss/*.scss')
	.pipe(sass().on('error', sass.logError))
	.pipe(rename({suffix: '.min', prefix : ''}))
	.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
	.pipe(minifycss())
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.stream());
});

gulp.task('scripts', function() {
	return gulp.src([
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/jquery-1.11.2.min.js',
		])
		.pipe(concat('libs.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./app/js/'));
});

gulp.task('watch', function () {
	gulp.watch('scss/*.scss', ['styles']);
	gulp.watch('app/libs/**/*.js', ['scripts']);
	gulp.watch('app/js/*.js').on("change", browserSync.reload);
	gulp.watch('app/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['browser-sync', 'watch']);

При изменении файла и добавления туда Dmitrijs Balcers "burbone"; вылазит ошибка

Всё делал по инструкции. Что не так?

Answer 1

[amf1k]

gulp.task('styles', function () {
  return gulp.src('scss/*.scss')
  .pipe(sass({
        includePaths: bourbone.includePaths
    }).on('error', sass.logError))
  .pipe(rename({suffix: '.min', prefix : ''}))
  .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
  .pipe(minifycss())
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.stream());
});

Comments

[Максим]

Всё равно говорит, что i.imgur.com/QA91nrH.png

[amf1k]

ну вы читать умеете? скорее всего нету файла front.scss, а лучше покажите как вы подключаете этот файл в scss

[Максим]

Максим: Я испробовал 1000 и 1 вариант :D Всё зря.

[Максим]

amf1k: i.imgur.com/A9JB48F.png

[Максим]

amf1k: как его нет, если он говорит что в нём ошибка? :D

[amf1k]

или ошибка в нем

[amf1k]

Dmitrijs Balcers 'bourbon';

@include font-face("RobotoRegular", "../fonts/Roboto-Regular", $file-formats: ttf);
@include font-face("RobotoBold", "../fonts/Roboto-Bold", $file-formats: ttf);
@include font-face("RobotoItalic", "../fonts/Roboto-Italic", $file-formats: ttf);

вот пример моего front.scss

[Максим]

amf1k: данная ошибка, а именно undefinded возникает, как только я bourbon подключаю. Если не подключаю, то он ругается на mixin, которого нет (всё логично), но вот почему он ругается на bourbon, я не знаю.

[Максим]

Две или одна ковычка при Dmitrijs Balcers не имеет значения. В любом случае = ошибка.

[Максим]

amf1k: на счёт mixin сейчас не идёт речь, речь идёт о том, что файл не компилируется вообще.

[amf1k]

undefinded Возникает когда чего то не хватает, логично же? если это бурбон => проверить есть ли в node_modules папки бурбона

[Максим]

amf1k: да. Нашёл там две папки node-bourbon и bourbon. Устанавливал только node-bourbon.

[amf1k]

так я так понимаю вы скопировали мой такс? если да, то замените bourbone на свою переменную bourbon

[amf1k]

gulp.task('styles', function () {
return gulp.src('scss/*.scss')
.pipe(sass({
includePaths: bourbon.includePaths
}).on('error', sass.logError))
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
.pipe(minifycss())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream());
});

[Максим]

amf1k: Я это заметил, уже сделал, всё равно. =(