Как вы подключаете библиотеки в gulp?

Question

[darksladen]

Всем привет, подскажите, как вы подключаете библиотеке в гальпе? Лично я пришел к выводу, что самый адекватный способ, либо все подключать через cdn, либо качать в папку lib, копировать ее и подключать из нее, так как если библиотеке нужны шрифты или картинки делать что то иное - сущий ад. Но минус, конечно, в том, что будет больше запросов к серверу. и.. вообщем я вижу минус только в этом, но зато это cdn, который быстрее. Что думаете на счет такого способа?

Вариант с bower вообще не рассматриваю, сами разработчики сказали о его смерти, не понимаю кто и зачем его использует. Вариант с npm хорош, но проблема начинается, когда библиотеке нужны какие то шрифты и картинки. Делать на это таск? Не хочу. Копировать их в папку с исходниками? А какой тогда смысл в npm, если часть библиотеки будет лежать как статика? Больше я вариантов особо не вижу, вообще подскажите, как делаете это вы? Есть правда еще webpack, но не хочется его использовать на мини проектах, где он все же будет лишним.

Comments

[Anton Filippov]

Галп это таск-раннер, библиотеки вы должны подключать в своих файлах (index.html, app.js etc)

[darksladen]

flppv, не совсем понял. Так вы за какой вариант? То, что гальп таск раннер я понимаю, но я думаю, как с помощью него все же можно собрать проект и есть ли способ это сделать качественно и удобно. Вебпак поюзал, почти то, что нужно, но зачем мне бандл на каком нибудь лендинге скажем?

[Anton Filippov]

darksladen, я за такой вариант, где галп и вопрос с подключением библиотек находятся в непересекаемых множествах)

[darksladen]

flppv, ок, ну а что посоветуете для лендингов к примеру? Вебпак на лендинге ну как то не очень хочется подключать. Или думаете норм?

[Anton Filippov]

darksladen, да можно и вебпак) чем вас бандл смущает? все в одном файле.
а можно и ручками

[darksladen]

flppv, тем, что все же вебпак больше для spa. Кстати, не подскажите как быстрый релоад на нем сделать. Вот пока это одна из проблем на вебпаке. Есть hmr, но у меня нет как таковых модулей, а делать модули и еще hmr настраивать на лендинге.. Ну не знаю. А в гальпе browsersync и он перезагружает только css. С js, конечно, все равно страница перезагружается, но на лендинге как раз cssa гораздо больше =) Так что не знаю даже..

Answer 1

[ValeraValera]

Зачем вообще для лэндинга сборщик ??? Если ты не понимаешь в каких ситуациях нужен сборщик , нехрен его использовать. Собирают "мастера" одну страничку на Sass , Pag , WebPack еще и какой Laravel вешают для бэка. Да ты быстрее эту страницу руками в одном html файле напишешь с инлайновым css и js в подвале, чем , настраивать весь этот модный инструментарий. Зато она грузится будет мгновенно и если придется цвет кнопочки поменять - не надо час вспоминать где у тебя что собирается и как это запустить. Пулемет - хорошее оружие против толпы, но стрелять им по воробъям не эффективно.

Comments

[darksladen]

а что вы сами используете? Без sass вообще как по мне невозможно, говорить о его модности это глупо, так как это невероятно полезный инструмент. Pug также очень полезен и ничуть не замедляет работа, наоборот ускоряя ее и делая код читабельней. Ну про laravel здесь явный перебор, возможно про вебпак тоже, это еще предстоит выяснить ) + browsercync очень удобен с туннелем, херак правишь что то и тебе не надо даже никуда ничего заливать, чтобы показать правки заказчику, у тебя есть туннель. Разве не удобно?

[darksladen]

Да и раз на то пошло, опять же установить библиотеку 1 командой как то проще, чем куда то лезть и искать ссылку на скачивание или боже упоси брать из своей папочки popular-lib на дропбоксе )

[Johny Smith]

darksladen,

1 командой

npm?

[darksladen]

Olek1, да хоть npm, хоть bower. А, ну всмысле.. yarn add bootstrap. Короче к примеру так

[Иван]

darksladen, bower мертв же

[darksladen]

Иван, для меня да, но я же вообще сказал, имелось ввиду, что какая разница как что подключать, хоть композером, суть же не меняется.

Answer 2

[zorca]

Без копирования ассетов: картинок и шрифтов в папку готового к использованию кода (dist) обойтись никак не получится. NPM автоматизирует обновление зависимостей, папка dist каждый раз чистится и туда кидаются только свежие ассеты. Честно говоря, не так уж много npm-пакетов, в которых используются шрифты с картинками. Чаще это просто SASS или JS, которые прекрасно собираются из папки node_modules без какого-либо копирования.

Comments

[darksladen]

Вы вопрос читали? Как мне из npm с помощью гальп нормально экспортировать шрифты и картинки, которые подключаются в css? Это полный геморой. Я же описал все возможные варианты, вы их читали? Допустим установите как slick слайдер например. Что нам надо сделать? Установить, потом копировать его картинки и шрифты. (возможно, создать задачу в гальпе) Но проблема в том, что слик хочет брать картинки из папки с css, так что вам придется туда их пихать. Второй вариант, это переписать переменную в sass, которую юзает слик + копировать ресурсы непосредственно в свои исходники. Ну и извините, нахера в таком случае вообще устанавливать либы через npm, если часть модуля будет у вас в исходниках?

Я бы все понял, если бы вы сказали мне - юзай вебпак, чмо. Но с гальпом единственный способ хардкодить.

[zorca]

darksladen, берем ваш пример, SLICK, подключаем его исходник: https://github.com/kenwheeler/slick/blob/master/sl...
О боже, там нет ни одного шрифта. Где же они? Ага, в теме вероятно: https://github.com/kenwheeler/slick/blob/master/sl...
И что же мы видим: о боже, там есть переменные и можно указать другой путь к шрифтам!
https://github.com/kenwheeler/slick/blob/master/sl...
Доки.
Юзай чего хочешь, но думай головой и все будет хорошо.

[darksladen]

zorca, ага, вы явно 1 месяц в разработке. Читайте то, что я написал и не делайте глупых выводов. Повторяюсь, специально для для.. вас. Шрифты эти надо копировать. Вы можете их скопировать либо таской либо вручную в исходники. Если копировать в исходники, то смысл в менеджере пакетов пропадает! Если таской - это геморой. Разобрались? Идем дальше.

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

[zorca]

darksladen, какое количество плагинов с ассетами в виде шрифтов и картинок вы используете? Слик мы посчитали, с ним все хорошо. Font Awesome? Еще что-то?

[Иван]

darksladen, Не совсем непонятно,в чем суть вопроса?Как перетащить картинки и шрифты с помощью гальпа?

[darksladen]

zorca, Так давайте сначала со сликом решим задачу. Что, таск делать предлагаете или что?

[darksladen]

Иван, я хочу понять, лучше все же отказаться от гальпа и для сборки использовать вебпак, либо подключать в тупую через гальп и не париться (всмысле не используя npm).

[zorca]

darksladen, таском копируем шрифты сразу в папку dist. Пути все в стилях к шрифтам считаем от месторасположения итогового собранного стиля.

[darksladen]

zorca, ну вот я про то и говорю, что нужен таск. Так не лучше все же вебпак использовать, где этого делать не надо? При чем проблема в том, что если посмотреть на вебпак сборки можно испугаться. Кто то подключает bower и даже не использует его, копируя либы вручную, кто то пилит либу напополам, половину оставляя в node_modules, половину вынося в исходники, меняя путь к файлам. А на вебпаке все же нет вариантов, просто берешь и подключаешь что нужно.

[Иван]

darksladen, Я сам новичок,но расскажу как у меня :) за одно мб опытные подскажут что-нибудь.

С npm устанавливаю библиотеки и файлы и подключаю нужные в libs.scss с помощью @ import

//////Сборка и минмализация стилей библиотек в lib.scss
gulp.task('css-libs', ['sass'], function() {
    return gulp.src('app/sass/libs.scss')
        .pipe(cssnano())
        .pipe(rename({
            suffix: '_.min'
        }))
        .pipe(gulp.dest('app/css/'));
});

все файлы js библы кидаю в один файл и сжимаю

////сборка и минификация библиотек
gulp.task('scripts', function() {
    return gulp.src([
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/slick-carousel/slick/slick.min.js',
            'node_modules/magnific-popup/dist/jquery.magnific-popup.min.js'
        ])
        .pipe(concat('libs.min.js'))
        .pipe(uglify())
        .pipe((gulp.dest('app/js')))
});

картинки

gulp.task('img', function() {
    return gulp.src('app/img/**/*') // Берем все изображения из app
        .pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования
            interlaced: true,
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});

[Иван]

darksladen, чтобы не мучиться когда пишете пути то юзайте AutoFileNAme

[zorca]

darksladen, если вы работаете над проектом уровня Авито, может и стоит использовать Вебпак, особенно когда количество js-кода в разы превышает стили. В вашем случае нет.

[darksladen]

Иван, блин сори ребят, но читайте внимательней вопросы. Это весьма стандартный билд. + скрипты в таком случае советую подключать в lib.js к примеру с помощью плагина gulp-include вроде, это гораздо эффективне и не надо перезагружать гальп. Окей, расскажите как будете подключать slick-theme например

[darksladen]

zorca, окей, а что плохого в подключении с cdn? Может тогда и минифицировать билд нужно на авито только? Дело в том, что, что cdn выглядит дерьмовым решением, но писать таски для такой задачи тоже мне не нравится вообще.

И еще.. Скажите пожалуйста, почему вебпак для таких проектов не подходит? Я могу же не использовать прям все его возможности, а просто хотя бы подрубать библиотеки, если он и здесь выигрывает, то почему бы его не использовать?