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

    @katoffsky
    На самом деле npm установилось изначально вместе с NodeJS (с версии 4 она идет в комплекте в любом случае), как я писал выше - сложности были с путями.

    Симлинки в Linux - очень и очень полезная штука, неоднократно меня выручали, к примеру в моменты, когда одному из клиентов к основному ftp-аккаунту, нужно было прилинковать еще парочку его сайтов, не плодя новых ftp-аккаунтов. Но все это было довольно давно, и как говорят - не правда.

    А так, не за что - обращайтесь, чем смогу - помогу.
    Администрирую основные ОС много-много лет. С радостью готов делиться знаниями. Все остальное - уже будет тщеславием.
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    Дословно "Уважаемы Линукс, создай символическую ссылку с существующего бинарника ноды по пути /usr/local/bin/node в то, где он по идее должен быть (/usr/bin/node)"

    Если нода встала по другому пути, то его нужно указать первым аргументом, а то что вылетает в ошибке (/usr/local/bin/node) вторым.

    В связи с этим корректнее будет так:

    #which node
    /какой-то/путь/до/node

    #ln -s /какой-то/путь/до/node /usr/local/bin/node

    #sudo npm install npm -g
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    тогда
    #sudo apt-get purge nodejs-legacy
    это снесет пакет и зависимость

    а симлинк попробуем создать вручную:

    #sudo ln -s /usr/local/bin/node /usr/bin/node
    #sudo ln -s /usr/local/lib/node /usr/lib/node
    #sudo ln -s /usr/local/bin/npm /usr/bin/npm
    #sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf

    пути возможно придется подправить под себя, определить где стоит nodejs и npm можно как в примере раньше
    #which node
    #which npm
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    Логично, так как это одно и тоже! В Linux это называется Alias'ы

    на тему ошибки apt-get

    #apt-get -f install nodejs-legacy
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    Смысл в том что новая версия NodeJS кидает бинарник по пути /usr/bin/nodejs, а npm пытается найти его по пути /usr/local/bin/node, но естественно его там нет, отсюда и ошибка.

    Значит пробуем такое решение:
    #sudo apt-get install nodejs-legacy

    этот пакет пропишет симлинк на /usr/bin/nodejs и все должно заработать
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    да, и еще nodejs прописывает пути опять же в переменную PATH
    для того чтобы шелл ее перечитал, необходимо либо перезапустить окно терминала, либо перелогиниться в системе
    надежнее перелогиниться
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    https://nodejs.org/en/download/package-manager/#de...

    первые две команды

    #curl --silent --location https://deb.nodesource.com/setup_4.x | sudo bash -
    #sudo apt-get install --yes nodejs

    -----
    Если нужно, то Build Tools тоже можно поставить
    #apt-get install --yes build-essential
    для задач, обсуждаемых в этом топике - не обязательно
    -----

    по итогам
    #node --version
    должна вывести
    v4.1.0
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    Ну тут все зависит от того как nodejs была установлена

    1. Если из репозиториев, то достаточно
    #sudo apt-get remove nodejs
    2. Если же из исходников, то из папки с самим исходником (разархивированным)
    #sudo make uninstall
    3. Если непонятно как, но удалить нужно наверняка, то

    #sudo npm uninstall npm -g //сносим npm
    после чего
    #which node // Выведет путь к бинарнику NodeJS, что-нибудь вроде /usr/local/bin/node
    далее
    #cd /usr/local // Переходим в папку
    затем
    #sudo rm -r bin/node bin/node-waf include/node lib/node lib/pkgconfig/nodejs.pc share/man/man1/node.1 //чистим все хвосты от NodeJS

    команды вводить нужно без //

    пробуйте, все должно получиться
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    Вот так вот прокомментирую, nodejs и node - это один и тот же программный продукт. Просто произошло слияние node.js + io.js (часть команды, которая ушла из основной ветки проекта ранее).

    Подробнее: geektimes.ru/post/262144

    Скорее всего так и получилось что у вас в системе стоят обе версии nodejs одновременно, так бывает.
    Посему gulp-sass и путается в путях для сборки.

    Посмотрите вывод #echo $PATH скорее всего в нем будут пути на обе версии. Насколько я помню, npm будет использовать первую версию node (та что у вас 0.12.7).

    Те же 2 варианта:

    1. Пересобрать все окружение с NodeJS 4.1.0 с чистого листа, вычистив все хвосты от 0.12.7 и от 4.0.0
    2. Использовать gulp-ruby-sass

    У меня установлен gulp-sass 2.0.4, который основан на версии node-sass 3.0.0 - все спокойно собирается на разных ОС.

    3. Вот еще что попробуйте сделать:

    а) #npm uninstall gulp-sass или #npm uninstall -g gulp-sass (в зависимости от того как ставили)
    б) откройте файлик package.json в корне вашего проекта и почистите секции dependencies и devDependencies от gulp-sass
    так как при выполнении #npm install galp-sass (без -g) качаются версии, указанные именно в package.json
    в) заного поставьте #npm install gulp-sass --save (если локально) или #npm instal -g gulp-sass (если глобально)
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    sergey martynuk: Конкретно с такой ошибкой не сталкивался, но думаю сложного тут быть ничего не должно.

    Несколько вопросов:

    1. Обновляли ли вы nodejs? Приведите вывод #node --version
    2. Каков результат выполнения команды #npm rebuild node-sass ? (Скорее всего она должна помочь)
    3. Если уже хочется работать, а не писать конфиги - в этой секции можно использовать gulp-ruby-ass (который мы заставили работать ранее), вместо gulp-sass, который пока не завелся.

    // Да, да я помню что сам советовал использовать gulp-sass, так как он как минимум быстрее.

    4. Пока писал ответ и размышлял на тему - чекнул https://nodejs.org/

    Там актуальная версия 4.1.0

    Возможно авторы gulp-sass уже успели пересобрать этот плагин под 4.1 !?

    Тут единственная рекомендация - обновить все - nodejs, npm. gulp, gulp-плагины, благо это довольно быстро. Сам вечером так и поступлю.

    P.S. Практически все, что мы здесь обсуждаем было неоднократно протестировано лично мной на разных ОС (Linux, OS X, Windows) - с версией node.js 4.0.0 - никаких проблем во время сборок/использования не возникало.
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    И еще, не забудьте таск js в таск по умолчанию прописать.
    Что-то вроде gulp.task('default', ['bower', 'icons','css', 'js']);
    Для того чтобы запускать окружение простой командой #gulp
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    sergey martynuk: Ну тут опять же ничего сложного:

    1. Добавьте переменную для пути в верхней части вашего конфига, для того чтобы gulp знал откуда ему брать исходники (не забыв создать саму директорию js в resources):

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

    2. Далее необходимо описать таск. В вашем случае он абсолютно не корректный.

    Самый простой вариант это:

    gulp.task('js', function() {
    return gulp.src(config.jsDir + '/main.js')
    .pipe(gulp.dest('./public/js'));
    });

    Могу расписать детально:

    В первой строке определяется название самого таска (то есть вы сможете запустить его, просто написав в консоли #gulp js)
    Во второй строке gulp цепляет исходник main.js, в данном случае из директории ./resources/js, определенной выше в конфиге.
    В третьей строке gulp просто кладет этот же main.js но уже в папку ./public/js.

    Пример абсолютно рабочий, но по моему мнению бессмысленный.

    3. Для того чтобы приблизить все это дело к реальности, нужно установить дополнительные плагины (все ставится через npm install gulp-название_плагина. При этом если глобально, то добавляем -g, если локально --save или --save-dev, для записи в package.json, это нужно для того чтобы вы смогли безболезненно передать свой проект кому-либо и этот "кто-либо" смог развернуть окружение одной командой).
    Лично я использую:
    gulp-rigger - для инклудов
    gulp-sourcemaps - для карт
    gulp-uglify - для сжатия

    Иногда вместо gulp-rigger'а, беру gulp-concat, в зависимости от задачи.

    Дополняя таск выше, должно получиться что-то вроде:
    gulp.task('js', function() {
    return gulp.src(config.jsDir + '/main.js')
    .pipe(rigger()) //инклюдим файлы (если необходимо)
    .pipe(sourcemaps.init()) //Инициализируем sourcemap (карты)
    .pipe(uglify()) //Сжимаем наш JS
    .pipe(sourcemaps.write()) //Записываем sourcemap (карты)
    .pipe(gulp.dest('./public/js')); //Закидываем готовый файл (после всех обработок) в ./public/js
    });

    Пример вполне себе рабочий, пути подправил под ваше окружение.

    Еще раз хочется сказать - тут очень важно не остановиться, и довести начатое до конца. Gulp покажется очень удобным и дружелюбным, а так же в последствии сэкономит огромную кучу времени.

    Если вы знакомы с javascript'ом, то все эти конфиги и таски - по сути просто переменные и функции JS. Вся Node.JS и ее производные так работают.

    С учетом всего вышеописанного, прочтите пожалуйста статью, которую я уже приводил выше - habrahabr.ru/post/250569
    все точно встанет на свои места.

    Если остались вопросы - спрашивайте.
  • Как корректно использовать связку bootstrap-sass в gulp-проекте?

    @katoffsky
    sergey martynuk: Ну тут все тоже достаточно просто.

    TL; DR - Проблема в данном случае исключительно в путях.

    Более развернутый ответ:

    Предполагается что у автора bootstrap установился в ./bower_components/bootstrap-sass
    и импорт идет из ./bower_components/bootstrap-sass/assets/stylesheets

    На деле же, у меня, скорее всего как и у вас bootstrap установился просто в ./bower_components/bootstrap и имеет немного другую структуру каталогов

    Проверьте этот момент и если каталог называется действительно ./bower_components/bootstrap/следовательно придайте вашей секции вот такой вот вид:

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

    Убедитесь, есть ли у вас вот по этому пути все scss файлы bootstrap'а - bower_components\bootstrap\scss

    Что касается дебага в данном случае - вы можете легко убедится в работоспособности данного конфига альтернативным методом - просто закомментируйте
    //@import "bootstrap";
    и у вас легко должен собраться ./public/css/style.css с импортированным google-font'ом, font-awesom'ом и вашими собственными стилями далее по коду.

    P.S. А еще я встречал ситуацию когда font-awesome, ставится в папку ./bower_components/fontawesome (без дефиса), на это тоже обратите внимание.