• Как найти ошибку?

    узнать где именно ошибка, а не просто получить ссылку на общий файл?


    Используйте плагин sourcemaps (плагин для gulp)
    1) Перед началом обработки файла указываете команду .pipe(sourcemaps.init())
    2) После обработки файла указываете: .pipe(sourcemaps.write())
    Всё это указано в документации.

    Получается такой код в Gulp-файле
    const gulp = require('gulp');
    const concat = require('gulp-concat');
    const sourcemaps = require('gulp-sourcemaps');
    
    gulp.task('js', function() {
      return gulp.src('js/*.js')
        
      // Инициируем карту перед работой с файлом
        .pipe(sourcemaps.init())
    
        // Объединяем все JS в один файл
        .pipe(concat('main.js'))
    
        // Записываем карту всех исходных файлов
        .pipe(sourcemaps.write())
    
        .pipe(gulp.dest('./'));
    })


    В итоге, в консоли упоминается не итоговый файл, а исходный

    5dfb5501d1044079730414.png
    Ответ написан
    Комментировать
  • Почему не запускается команда gulp serve?

    Добавьте задачу, которая будет запускать последовательно нужные команды за Вас.
    gulp.task('default', gulp.series('sass', 'html', 'serve'));

    Это распространённая практика.
    А для запуска используйте просто команду gulp в консоли

    Подходит такое?
    Итоговый код Gulp-файл

    const gulp = require('gulp');
    const sass = require('gulp-sass');
    const plumber = require('gulp-plumber');
    const autoprefixer = require('gulp-autoprefixer');
    const browserSync = require('browser-sync').create();
    const sourceMaps = require('gulp-sourcemaps');
    
    gulp.task('sass', function() { // таск scss
      return gulp.src('scss/style.scss')
        .pipe(plumber()) // если будут ошибки в style.scss - не отключаться, а работать далее
        .pipe(sourceMaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
          browsers: ['last 2 versions']
        }))
        .pipe(sourceMaps.write())
        .pipe(gulp.dest('build/css')) // будет создаваться папка build, внутри нее будет создаваться папка css и туда будет ложиться файл style.css
        .pipe(browserSync.reload({
          stream: true
        })); // перезапускать браузер, при изменениях в таске sass
    });
    
    gulp.task('html', function() {
      return gulp.src('*.html')
        .pipe(gulp.dest('build'))
        .pipe(browserSync.reload({
          stream: true
        }));
    });
    
    gulp.task('serve', function() {
      browserSync.init({
        server: "build"
      });
      gulp.watch("scss/**/*.scss", gulp.parallel("sass")); // следить за всеми файлами в папке scss и при изменении запускать таск под названием scss
      gulp.watch("*.html", gulp.parallel("html")); // тоже самое, только с таском html
    });
    
    // данный код не запускается командой gulp serve. приходится перечислять все три таска поочередно.
    
    gulp.task('default', gulp.series('sass', 'html', 'serve'));

    Ответ написан
    1 комментарий
  • Почему андроид меняет шрифт в SVG?

    Вот сам файл .svg.

    Не видно, где этот файл

    Почему андроид меняет шрифт в SVG?

    По всей видимости, на Android нет семейства шрифтов "Lobster", которое используется
    .st2{font-family:'Lobster';}
    Решить проблему можно, открыв данный файл например, в Adobe Illustrator и заново экспортировать, в настройках экспорта в разделе "Шрифт" выбрав вариант "Преобразовать в кривые".
    Текст будет нарисован SVG-фигурами

    UPD: ни на компьютере, ни на телефоне надпись, скорее всего, не отображается так, как это задумывалось изначально дизайнером. Ведь для надписи используется шрифт "Lobster". Просто на компьютере вместо него подставляется один шрифт (скорее всего, Times New Roman), а на Android - другой (скорее всего, Roboto)

    UPD2: Ссылка на новый вариант файла с преобразованным в кривые текстом.
    Вот, как должно выглядеть это изображение

    5df74df3f3d0c432524324.png
    Ответ написан
    2 комментария
  • Как прилепить дочерний элемент к низу родителя?

    Как прилепить дочерний элемент к низу родителя?


    1) Либо с помощью абсолютного позиционирования:
    .main_contacts {
      ...
      position: absolute;
      left: 0;
      bottom: 0;
      ...
    }

    Пример рабочего кода на Codepen
    .
    .
    2) Либо с помощью Flexbox
    .main {
      ...
      display: flex;
      flex-direction: column;
      ...
    }
    .main_contacts {
      ...
      margin-top: auto;
      ...
    }

    Пример рабочего кода на Codepen
    Ответ написан
    Комментировать
  • Блоки не заполняются автоматически grid layout?

    блоки которые не относятся к данной выбранной экскурсии тупо уходят в display none

    Так Вы задаёте свойство display: none для элементов с классом .excurs__item.
    При этом, в данной ячейке остаётся ссылка, в которую они вложены. Конечно ячейки не будут исчезать.
    Задавайте display: none для родительской ссылки.

    Скриншот

    5df67739f0cad012216539.png
    Ответ написан
  • Как поправить код Gulp 3 под Gulp 4?

    Пробуйте

    var gulp = require("gulp");
    var less = require("gulp-less");
    var postcss = require("gulp-postcss");
    var autoprefixer = require("autoprefixer");
    var server = require("browser-sync").create();
    
    gulp.task("style", function() {
      gulp.src("less/style.less")
        .pipe(less())
        .pipe(postcss([
          autoprefixer()
        ]))
        .pipe(gulp.dest("css"))
        .pipe(server.stream());
    });
    
    gulp.task("serve", function() {
      server.init({
        server: ".",
        notify: false,
        open: true,
        cors: true,
        ui: false
      })
    
      gulp.watch("less/**/*.less", gulp.series('style'))
      gulp.watch("*.html").on("change", server.reload)
    
    })
    Ответ написан
    Комментировать
  • Как поместить svg картинку в input которая будет менять цвет когда input получает фокус?

    Как поместить svg картинку в input которая будет менять цвет когда input получает фокус?

    Чтобы к SVG был доступ из CSS:
    1) его необходимо вставлять в HTML-файл прямо в виде исходного кода
    2) либо путём подключения с помощью <use>, предварительно вынеся исходный код SVG-иконки в отдельный файл (например, SVG-спрайт), поместив внутрь и задав ему ID, чтобы по которому можно будет вызвать нужный код

    Пример на CodePen с демонстрацией и дополнительными объяснениями комментариями в HTML-коде
    https://codepen.io/hisbvdis/pen/MWYyGvW
    Ответ написан
    2 комментария
  • Не запускается gulp?

    Попробуйте запустить команду: npm rebuild node-sass
    Ответ написан
    4 комментария
  • Возможно ли и если возможно то как сделать box-shadow для SVG?

    Либо через CSS3-свойство filter:drop-shadow(): подробнее

    Либо через SVG-фильтр feDropShadow: подробнее
    Ответ написан
    2 комментария
  • Проблема с настройкой сборки проекта?

    Браузер выдает: Cannot GET /. Что нужно исправить, чтобы сборка заработала?

    У Вас сервер запускается в папке build/
    В папке build должен быть файл index.html, чтобы было что отображать

    Судя по задаче под названием pug, файлы .html копируются в эту папку после компиляции PUG-файлов из папки src/pug/pages. Для проверки можете вручную в папку build забросить файл index.html

    UPD:
    нужно обновить плагин на gulp4-run-sequence. И изменить последнию функцию на:
    gulp.task('default', function(callback){
    runSequence(
    'clean:build',
    ['scss', 'pug', 'copy:js', 'copy:libs', 'copy:img'],
    'server',
    callback
    )
    });
    Ответ написан
  • Размер монтажной области под объекту illustrator?

    Способ №1
    Настраиваете горячие клавиши в панели "Редактирование -> Комбинации клавиш".
    Переключаете на "Меню программы", вводите в поиске "подогнать" и указываете горячие клавиши конкретно для этого действия
    Скриншот

    5de5241ea2d3a655481739.png


    Способ №2 (от пользователя RAX7 в комментариях к вопросу)
    Объект -> монтажная область -> по границам иллюстрации

    Способ №3:
    Дважды нажимаете по инструменту "Монтажные области" и в окошке в поле "Установки" выбираете "Подогнать по границам иллюстрации.
    Скриншот

    5de523066eb9c227259358.png
    Ответ написан
    1 комментарий
  • Что не так с алгоритмом в gulpfile js?

    Так как входящих данных очень мало, приходится угадывать и первое, что можно предположить, что в строке
    return gulp.src('app/sass/**/*.sass')
    Вы ищете файлы с расширением .sass, а код пишете, возможно на scss с таким же расширением .scss.
    Так как исходных файлов с нужным расширением нет, то и не создаётся ничего.

    Если нет, просьба уточнить, появляются ли в консоли какие-то ошибки. А еще лучше - выложить архив с проектом куда-то на https://fex.net/, чтобы можно было нормально изучить проект.
    Ответ написан
  • Как установить иконку в качестве фона элементу?

    SVG можно использовать в CSS с помощью data:URI, но без кодирования это работает только в браузерах, работающих на движке Webkit. Если перекодировать SVG, используя encodeURIComponent, это будет работать везде.

    Закодированный SVG можно использовать в свойствах background и border-image

    Вот сервис Юли Бухваловой, который помогает в кодировании: URL-encoder for SVG
    P.S. Кодированный SVG-код можно обратно раскодировать в обычный вид, если нужно

    А вот пример Вашего SVG, подставленного в background после кодирования

    https://codepen.io/hisbvdis/pen/wvBwRYP

    Ответ написан
    Комментировать
  • Как правильно задать ширину элементов grid?

    как мне указать что все эти 5 вложенный элементов будут иметь ширину 2 ячейке


    С помощью свойства grid-column: span 2;, заданного для элементов

    Результат:
    https://codepen.io/hisbvdis/pen/NWPKYyN

    5de2aaf78801d282766284.png
    Ответ написан
    Комментировать
  • Почему не работает Gulp?

    Katie99, в задаче про запуск сервера нужно удалить фрагмент gulp.series('less')

    Скриншот

    5de0d32a82583180481199.png

    Итоговый код

    var gulp = require('gulp'),
        browserSync = require('browser-sync').create(),
        less = require('gulp-less'),
        sass = require('gulp-sass');
    
    
    gulp.task('server', function() {
        browserSync.init({
            server: {
                baseDir: "./app/"
            }
        });
        gulp.watch('./app/**/*.html').on('change', browserSync.reload);
        gulp.watch('app/less/**/*.less', gulp.series('less'));
    });
    
    
    gulp.task('less', function(){
        return gulp.src('./app/less/main.less')
        .pipe(less())
        .pipe(gulp.dest('./app/css'))
        .pipe(browserSync.stream());
    });
    
    
    gulp.task('default', gulp.series('server'));

    Ответ написан
  • Ошибка: fs.js:27 const { Math, Object } = primordials; .Почему не работает Gulp?

    На основании этой статьи

    Проблема может возникать при установке плагинов, которые были помечены не рекомендуемыми (deprecated).

    1) Удаляете плагины (всю папку node_modules)
    2) Устанавливаете заново командой npm install
    3) В логах установки ищете проблему, например, как на скриншоте ниже (сбросьте скриншот)
    4) Проверьте работоспособность кода

    5ddd079249c2c353341033.png

    Еще один вариант:
    Помимо переустановки node_modules, можно удалить файлы package и заново инициализировать проект с помощью npm init
    Ответ написан
  • Как заставить sass реагировать на сохранение файлов, которые импортирую?

    Как вариант, использовать таскранер типа Gulp.
    Там можно настроить "следилку" за нужными файлами и запускать компиляцию
    Ответ написан
    Комментировать
  • Почему не работает Gulp?

    Замените строку
    gulp.task('default', ['server']);
    на строку
    gulp.task('default', gulp.series('server'));

    После этого задача начинает запускаться без ошибки по команде gulp в терминале

    Итоговый код с новой строкой

    var gulp = require('gulp');
    
    var browserSync = require('browser-sync').create();
    
    gulp.task('server', function() {
    
      browserSync.init({
        server: {
          baseDir: "./app/"
        }
      });
    
      gulp.watch('./app/index.html').on('change', browserSync.reload);
    
    });
    
    gulp.task('default', gulp.series('server'));



    5ddb5363c0956525602487.png
    Ответ написан
  • Gulp css,scss как настроить?

    помогите его переделать под мои требование.....что бы все файлы scss записывались в один main.css

    Можете использовать для этого плагин "gulp-concat"

    Настроенный gulp-файл

    // Константы
    const gulp = require('gulp');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const watch = require('gulp-watch');
    const minifyCSS = require('gulp-minify-css');
    const concat = require('gulp-concat');
    
    //Подключения
    gulp.task('sass-compile', function () {
        return gulp.src('template/scss/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(sourcemaps.write('./'))
            .pipe(concat('main.css'))
            .pipe(minifyCSS({keepBreaks: true}))
            .pipe(gulp.dest('template/css/'))
    
    })
    
    // The end //
    gulp.task('watch', function () {
        gulp.watch('template/scss/**/*.scss', gulp.series('sass-compile'))
    })



    Но вообще, это кажется не очень хорошим подходом. Ведь Вы не контролируете последовательность подключения. Это можно делать с помощью плагина, но более наглядным и правильным решением кажется создание основного sass-файла и подключение к нему других блоков с помощью @import. После чего с помощью gulp компилировать только этот главный sass-файл.

    5dda618ccba31236149708.png
    Ответ написан
    Комментировать
  • Как настроить gulp и babel-cli?

    Плагин по указанной Вами ссылке не относится к Gulp.
    Babel-плагин для Gulp находится здесь
    Ответ написан
    2 комментария