Ответы пользователя по тегу Gulp.js
  • Как исправить ошибку с gulp в плагине gulp-imagemin?

    @joseffie
    Front-end developer
    Либо устанавливайте версию gulp-imagemin ниже 8.0, либо импортируйте в синтаксисе ESM, как написал Александр.
    Ответ написан
    Комментировать
  • Что делать если при проверки работоспособности GULP выдает ошибку?

    @joseffie
    Front-end developer
    Стоит научиться читать ошибки и гуглить, и Вы столько времени сможете себе сэкономить.

    Ошибка
    AssertionError [ERR_ASSERION] Task never defined: server
    доходчиво говорит Вам, что таск server, который Вы используете в gulp.parallel('watch', 'server', 'style'), неопределён.

    Для сервера я у Вас вижу таск 'browser-sync', его Вам и нужно использовать, либо переименовать его в 'server'.

    P. S. на будущее, оформляйте код в вопросе внутри тега < code >, либо через JSFiddle или CodePen. С кодом в скриншоте неудобно работать + скриншоты кода запрещены правилами Хабра.
    Ответ написан
    2 комментария
  • Ошибка TypeError: dest.on is not a function?

    @joseffie
    Front-end developer
    В Вашем случае ошибка dest.on is not a function возникает из-за того, что что-то, вызываемое в вашем пайплайне не является потоком.

    Скорее всего, проблема в 40 строке .pipe(ttf2woff2). Дело в том, что данная функция не вызвана и, соответственно, не возвращает поток.

    Замените .pipe(ttf2woff2) на .pipe(ttf2woff2()), и ошибка должна исчезнуть.
    Ответ написан
    Комментировать
  • Как ускорить сборку проекта?

    @joseffie
    Front-end developer
    Моё решение данной проблемы:

    Инициализируем переменную watching (или любое другое название, это не играет значения) и присваиваем ей значение false, затем внутри таска Pug инициализируем плагин emitty:

    const emittyPug = emitty.setup('src', 'pug', { makeVinylFile: true })


    Затем возвращаем промис, внутри которого сканируем глобальную переменную emittyPugChangedFile (она будет нужна, чтобы потом присвоить ей необходимое значение в gulp.watch()). Также не забудьте функции таска Pug указать аргумент-коллбэк (в данном случае done), так как Gulp может жаловаться на отсутствие асинхронного завершения.

    return new Promise(() => {
      emittyPug.scan(global.emittyPugChangedFile).then(() => {
        .src()
        ...
        .pipe(gulpif(watch, emittyPug.filter(global.emittyPugChangedFile)))
        ...
        dest()
      })
    
      done()
    });


    Затем в начале вашей функции serve присвойте переменной watching значение true и напишите следующий gulp.watch() для Pug:

    watch(['src/pages/**/*.pug', 'src/components/**/*.pug'], pugHandler).on('all', (event, filepath) => {
      global.emittyPugChangedFile = event === 'unlink' ? undefined : filepath; 
    });


    После этих действий сборка должна стать инкрементальной. Также вы можете всё это рассмотреть на примере моей собственной сборки: gulpfile, Pug-таск, watch.
    Ответ написан
    Комментировать
  • Почему возникает ошибка The following tasks did not complete: watch?

    @joseffie
    Front-end developer
    В ошибке чёрным по белому написано, что необходимо сообщить об асинхронном завершении.

    Как это делается, гуглится за несколько секунд по запросу "async completion gulp". Самый простой способ - сделать функцию таска watch асинхронной:
    gulp.task('watch', async function() {
      gulp.src('./src/precss/**/*.css', ['build']);
    });
    Ответ написан
    Комментировать
  • Где скачать актуальную сборку gulp?

    @joseffie
    Front-end developer
    Вы можете использовать сборку от Фрилансера по жизни. В видео он подробно описывает каждую часть сборки, а сама сборка получается очень функциональной.
    Ответ написан
    Комментировать
  • Почему не срабатывает gulp newer?

    @joseffie
    Front-end developer
    Плагин gulp-newer создан для того, чтобы отслеживать удаление/добавление файлов, за обработку файлов он не отвечает. Для вашей задачи (компиляция файлов по отдельности) подходит плагин emitty.
    Ответ написан
  • Как подружить gulp pug и классы контрольных точек tailwind?

    @joseffie
    Front-end developer
    Дело в том, что интерпретатор Pug не поддерживает символы, такие как `:`, `/`, `!` и пр. символы используемые классами в Tailwind, если прописывать их после точки или хеша.

    В случае с разделителем (в вашем случае символом `:`) в `tailwind.config.js` вы можете установить `separator: '_'` или любой другой удобный вам символ, и уже вместо двоеточия использовать установленный символ.

    В остальных случаях записывайте классы, содержащие недопустимые символы, в атрибуте `class`.
    Ответ написан
    Комментировать
  • Ошибка в gulpfile.js как решить?

    @joseffie
    Front-end developer
    Таск сервера должен быть асинхронным, иначе Галп не может определить, когда закончится данная задача, и продолжить своё выполнение. Способов решить эту проблему достаточно много, но проще всего в конце таска сервера просто вернуть функцию-коллбек:
    gulp.task('server', function(done) {
    
        browserSync({
            server: {
                baseDir: "src"
            }
        });
    
        gulp.watch("src/*.html").on('change', browserSync.reload);
    
        done();
    });
    Ответ написан
    Комментировать
  • Можно ли в gulpfile настроить, чтобы при малейшей ошибке js не крашился dev сервер?

    @joseffie
    Front-end developer
    Установите gulp-plumber. Он будет обрабатывать ошибки и не давать Галпу прерывать сервер.

    Просто вставьте его в начале таска пайпом:
    import plumber from 'gulp-plumber';
    // or
    // const plumber = require('gulp-plumber');
    
    function scripts() {
      return src(['app/js/*.js', '!app/js/*.min.js'])
        .pipe(plumber())
        .pipe(webpackStream({
          mode: 'production',
          performance: { hints: false },
          plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), // jQuery (npm i jquery)
          ],
          module: {
            rules: [
              {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['babel-plugin-root-import']
                  }
                }
              }
            ]
          },
          optimization: {
            minimize: true,
            minimizer: [
              new TerserPlugin({
                terserOptions: { format: { comments: false } },
                extractComments: false
              })
            ]
          },
        }, webpack)).on('error', function handleError() {
          this.emit('end')
        })
        .pipe(concat('app.min.js'))
        .pipe(dest('app/js'))
        .pipe(browserSync.stream())
    }
    Ответ написан
    Комментировать
  • Как отформатировать красиво текст ошибки, пробелами и переносами текста?

    @joseffie
    Front-end developer
    function validate () {
      return src('.')
        .pipe(plumberSmart())
        .pipe(through2(function (file, enc, callback) {
          callback(new PluginError({
            plugin: 'validate',
            message: `${chalk.underline('Привет я строка 1')}\n${chalk.cyan('Привет я строка 2')}\n\nЯ подведение итогов`
          }))
        }))
    }
    Ответ написан
    Комментировать
  • Как исправить ошибку с gulp?

    @joseffie
    Front-end developer
    Вероятно, вы используете del версии >7.0.0. С последнего релиза этот плагин перешёл на ESM. Чтобы исправить ошибку, импортируйте плагин таким образом:
    import { deleteSync } from 'del'
    Ответ написан
    Комментировать
  • Почему не работает del в gulp?

    @joseffie
    Front-end developer
    В релизе 7.0.0 плагин del перешёл на ES модули. Чтобы плагин заработал, измените
    import del from 'del'
    на
    import { deleteSync } from 'del'
    Ответ написан
    2 комментария