Задать вопрос

Владимир Солнцев

Верстальщик
Ответы пользователя по тегу Gulp.js

  • Как запустить gulp таск с параметром?

    @vladdimir
    Верстальщик
    Но таск не перестал запускаться как Starting 'anonymous'...

    Потому что функция анонимная. 
    const html = (lang) => {  // (1)
// 1 - первый вызов происходит, когда вы подключаете таску и передаете ей свои аргументы.
  return () => { // (2)
// 2- эта функция возвращается после передачи аргументов
// и вызывается, когда вы таску запускаете.
// как видите, у нее нет имени.
    return gulp.src("source/*.njk")
      .pipe(rename({suffix: lang}))
      .pipe(gulp.dest("build"));
  };
}
exports.html = html;


    const html = (lang) => {
// объявляем функцию
  const html = () => {
    return gulp.src("source/*.njk")
      .pipe(rename({suffix: lang}))
      .pipe(gulp.dest("build"));
  };
  return html;
}
exports.html = html;
    Ответ написан
    1 комментарий
    1 комментарий

  • Sass не компилируется с css gulp4, в чем проблема?

    @vladdimir
    Верстальщик
    Мне тоже не совсем понятно, что вы делаете, что должно происходить и как это работать должно?
    Я установил Gulp 4 подключил sass и все работает, но только когда я перезапускаю gulp через терминал, до этого момента не браузер не файл css не обновляется, сижу целый день, не могу понять в чем проблема.

    В общем не могу я понять вашу проблему. Вот в тексте сказано, что при каких-то условиях сборка работает, а при других нет. Какие условия не ясно. Быстрее всего искать проблемы, сравнивая отличия. Почему работает в одних условия, что изменяется в других условиях запуска, что перестает работать.

    По самому файлу, ну слежение у вас настроено странновато

    gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));

    Тут вроде норм, отслеживаете изменения в файле, запускаете задачу на сборку. Только вот вы отслеживаете только основной файл. Это значит, что блоки, которые вы подключаете в него, наблюдатель просмотрит только один раз, сразу после подключения директивой import, после этого все изменения в подключаемых в файле импортах наблюдатель не заменит и основной файл не пересоберет. Нужно указать путь к файлам, которые нужно отслеживать: 'catalog/view/theme/apple/stylesheet/**/*.sass', например. Хотя если у вас весь код в одном файле, без использования import, то и так норм.

    Далее по сборщику
    gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/template/**/*.twig', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
    gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);

    Этими правилами вы говорите Галпу: «Смотри за всеми этими файлами, а если они изменятся, перезагрузи страницу и все». То есть, никакой сборки не происходит, просто перезагрузка. Хотя если так и надо или где-то в другом месте что-то делается, то значит так и надо, наверное.

    Еще заметил что у вас две задачи с одинаковым именем 'sass'. Стало интересно, что делает Галп в таких случаях: ругается или переопределяет задачу?

    Больше каких либо проблем беглым взглядом не вижу, непривычно такую сборку смотреть, очень хаотично на мой взгляд. Например, browserSync я организую в одной задаче и не приходится добавлять reload в другие задачи:
    const watcher = () => {
  watch(options.scripts.src, scripts);
  watch(options.html.watch, html);
  watch(options.styles.watch, styles);
  watch(options.copy.src, copy);
};

const server = () => {
  browserSync.init({
    server: {
      baseDir: output,
    },
  });

  browserSync.watch(`${output}/**/*.*`).on('change', browserSync.reload);
};

    В итоге получается так, что если какая-то задача не работает, проблема всегда в этой задаче и по другому быть не может.
    Ответ написан
    2 комментария
    2 комментария

  • Как поставить отслеживание для html (Gulp)?

    @vladdimir
    Верстальщик
    АПИ галпа, функция watch: gulp.watch()

    Если на пальцах:
    watch(globs, [options], [task])
    globs - строка или массив - задаем где и что отслеживать: путь к файлу
    [options]- объект с опциями, все есть в доке. Необязательный аргумент.
    [task] - задача, которую нужно запустить или набор задач через gulp.series, gulp.parallel. Или функция.

    gulp.watch('entry/html/**/*.html', html);
    Как то так вроде.

    Для справки: в доке появилась инфа, что создание задач через gulp.task(...) уже не есть хорошо и нужно подключить через exports
    вроде:
    const task1 = () => {};

    exports.task1 = task1;

    Сейчас свою базовую сборку переписываю, пока что нравится - выглядит лаконичнее.
    Ответ написан
    Комментировать
    Комментировать