Ответы пользователя по тегу Gulp.js
  • Зачем используют Bower с Gulp?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    Разные разработчики имеют тот или иной опыт работы и тот или иной стаж. Соответственно, если сейчас вам уже проще использовать Gulp, да и сами разработчики Bower уже не рекомендуют его использовать для установки пакетов, то вы используете Gulp. Но кто-то начинал ранее, или же просто первым делом столкнулся с Bower, и стал использовать изначально его.

    Практического смысла в данный момент использовать именно его нет, раньше это имело смысл, когда Bower рекомендовали использовать для пакетов для фронта, а npm (не важно как, через Gulp или впрямую), использовать для бекенда - связано это было с тем, что первый не тянул зависимости для каждого пакета в свою личную папку, они устанавливались в общую, и таким образом папки с пакетами для фронта были более чистыми, а зависимые пакеты - общими.

    Но при этом использовать везде Gulp для управления пакетами тоже нет смысла, так как для простых проектов это плюс один инструмент, который не факт, что нужен. Кому-то будет проще использовать чистый package.json и просто указать в инструкции своего проекта, что нужно запустить установку пакетов из него.
    Ответ написан
    Комментировать
  • Как настроить Gulp, чтобы корректно прописывал пути файлов?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    Вообще, тут нужно понимать, что все подобные задачи в Gulp решаются как правило за счет тех или иных плагинов для него. Так, конкретно для вашей задачи подойдет плагин gulp-modify-css-urls. Сначала вам необходимо установить его:
    npm install --save-dev gulp-modify-css-urls
    Параметр --save-dev укажите, если хотите, чтобы эта зависимость прописалась в ваш package.json в раздел dev. После этого вы можете модифицировать пути в файлах css с помощью примерно такого кода (взят из доков этого плагина):

    var gulp = require('gulp')
      , modifyCssUrls = require('gulp-modify-css-urls');
     
    /* style.css
    body {
      background-image: url('images/logo.png');
    }
    */
    gulp.task('modifyUrls', function () {
      return gulp.src('style.css')
        .pipe(modifyCssUrls({
          modify: function (url, filePath) {
            return 'app/' + url;
          },
          prepend: 'https://fancycdn.com/',
          append: '?cache-buster'
        }))
        .pipe(gulp.dest('./'));
    });
    /* style.css
    body {
      background-image: url('https://fancycdn.com/app/images/logo.png?cache-buster');
    }
    */

    В коде вроде бы все понятно прокомментировано, но если что, спрашивайте уточнение. В целом же, есть вариант и сразу писать LESS-файлы таким образом, чтобы потом не приходилось их редактировать. Но это, конечно, дело вкуса, да и так не слишком удобно разрабатывать код, конечно.
    Ответ написан