Задать вопрос
zorro76
@zorro76
bootstrap

Как корректно использовать связку bootstrap-sass в gulp-проекте?

Пересмотрел несколько туториалов о создании такого проекта, как gulp-bootstrap-sass. Но пытаясь его самостоятельно запустить наткнулся на проблему, выдает ошибку и не компилирует sass.

мой gulpfile.js
var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	notify = require("gulp-notify"),
	bower = require('gulp-bower');

var config = {
	sassPath: './resources/sass',
	bowerDir: './bower_components'
};

gulp.task('bower', function() {
	return bower()
		.pipe(gulp.dest(config.bowerDir))
});
gulp.task('icons', function() {
	return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
		.pipe(gulp.dest('./public/fonts'));
});

gulp.task('css', function() {
	return gulp.src(config.sassPath + '/style.scss')
		.pipe(sass({
			style: 'compressed',
			loadPath: [
				'./resources/sass',
				config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
				config.bowerDir + '/font-awesome/scss',
			]
		})
			.on("error", notify.onError(function (error) {
				return "Error: " + error.message;
			})))
		.pipe(gulp.dest('./public/css'));
});

gulp.task('watch', function() {
	gulp.watch(config.sassPath + '/**/*.scss', ['css']);
});

gulp.task('default', ['bower', 'icons', 'css']);


Может кто посоветует годный туториал по настройке такого проекта, где все доступно.
  • Вопрос задан
  • 10867 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Академия Эдюсон
    Java-разработчик: тариф PRO
    8 месяцев
    Далее
  • Яндекс Практикум
    Python-разработчик расширенный
    14 месяцев
    Далее
  • Stepik
    Frontend разработчик на HTML, CSS и JavaScript
    4 месяца
    Далее
Решения вопроса 2
sim3x
@sim3x
Использовать рубишную версию стоит только если она тебе точно нужна

bover конечно круто использовать, но нафиг он нужен если все есть в npm?
Да и прибирать за ним нужно

'use strict';
/*
npm install --save-dev  \
  gulp  \
  node-sass \
  gulp-sass \
  compass-mixins  \
  bootstrap-sass  \
  gulp-autoprefixer \
  gulp-minify-css \
  gulp-sourcemaps
*/

// load plugins
var gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  minify_css = require('gulp-minify-css'),
  sourcemaps = require('gulp-sourcemaps'),
  path = require('path');

gulp.task('sass', function () {
  gulp.src("paths/to/sass/files/**/*.sass")
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: [],
        imagePath: "path/to/images"
      })
      .on('error', sass.logError))

    // https://github.com/ai/browserslist
    .pipe(autoprefixer("last 2 version", "> 1%", "Explorer >= 8", {
      cascade: true
    }))

    .pipe(minify_css({compatibility: 'ie8'}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("paths/to/css_dir"));
});


//watch
gulp.task('live', function () {
  //watch .sass files
  gulp.watch("paths/to/sass/files/**/*.sass", ['sass']);
});

gulp.task('default', ['live']);
Ответ написан
Комментировать
Комментировать
@katoffsky
Приветствую!

Если вы за основу брали вот эту статью: ericlbarnes.com/setting-gulp-bower-bootstrap-sass-..., то она слега устарела. В ней есть некоторая неточность, о которой пока не знает автор.

Смысл в том, что начиная с версии > 2 gulp-ruby-sass должен вызываться не как .pipe(sass({})), а как значение функции просто из-за того что изменился синтаксис.

Об этом подробно написано вот здесь: stackoverflow.com/questions/28140012/gulp-typeerro...

Разобраться в этом совсем не сложно, но если терпение уже на пределе - просто замените ваш таск "css" вот на этот и все заработает:

gulp.task('css', function() {

            return sass(config.sassPath + '/style.scss', {

            style: 'compressed',

            loadPath: [

                './resources/sass',

                config.bowerDir + '/bootstrap-sass/assets/stylesheets',

                config.bowerDir + '/font-awesome/scss',

            ]

        })
.on("error", notify.onError(function (error) {

                return "Error: " + error.message;

            }))


        .pipe(gulp.dest('./public/css'));

});


Обратите внимание на вторую строку (после return)

А вообще еще рекомендую посмотреть в сторону gulp-sass (это gulp-ruby-sass переписанная на C / C++)

Хорошая отметка для старта тут: habrahabr.ru/post/250569
Ответ написан
40 комментариев
40 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы