Ответы пользователя по тегу Gulp.js
  • Появляются buffered 2 events в gulp 3,браузер не прогружает иногда изменения,хочу обновиться к gulp4,как правильно прописать код,чтобы gulp4 работал?

    Пробуйте

    Код Gulp-файла

    var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    var less = require('gulp-less');
    var plumber = require('gulp-plumber');
    var notify = require('gulp-notify');
    var sourcemaps = require('gulp-sourcemaps');
    var autoprefixer = require('gulp-autoprefixer');
    var watch = require('gulp-watch');
    var fileinclude = require('gulp-file-include');
    
    gulp.task('styles', function() {
      return gulp.src('./app/less/main.less')
        .pipe(plumber({
          errorHandler: notify.onError(function(err) {
            return {
              title: 'Styles',
              sound: false,
              message: err.message
            }
          })
        }))
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./app/css'))
        .pipe(browserSync.stream());
    });
    
    gulp.task('html', function() {
      return gulp.src('./app/html/*.html')
        .pipe(plumber({
          errorHandler: notify.onError(function(err) {
            return {
              title: 'HTML include',
              sound: false,
              message: err.message
            }
          })
        }))
        .pipe(fileinclude({
          prefix: '@@'
        }))
        .pipe(gulp.dest('./app/'))
    });
    
    gulp.task('server', gulp.series('styles', 'html', function() {
      browserSync.init({
        server: {
          baseDir: './app'
        }
      })
    
      gulp.watch(['./app/**/*.html', './app/**/*.js', './app/img/*.*']).on('change', browserSync.reload);
      gulp.watch('./app/less/**/*.less', gulp.series('styles'));
      gulp.watch('./app/html/**/*.html', gulp.series('html'));
    }))
    
    gulp.task('default', gulp.series('server'));

    Ответ написан
  • Как найти ошибку?

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


    Используйте плагин 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 комментарий
  • Как поправить код 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)
    
    })
    Ответ написан
    Комментировать
  • Не запускается gulp?

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

    Браузер выдает: 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
    )
    });
    Ответ написан
  • Что не так с алгоритмом в gulpfile js?

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

    Если нет, просьба уточнить, появляются ли в консоли какие-то ошибки. А еще лучше - выложить архив с проектом куда-то на https://fex.net/, чтобы можно было нормально изучить проект.
    Ответ написан
  • Почему не работает 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
    Ответ написан
  • Почему не работает 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 комментария
  • Зачем нужен Gulp/Webpack?

    Это Taskrunners (запускатели задач), предназначение которых - с помощью JavaScript-библиотек автоматизировать большое количество различных процессов, которые производятся с ресурсами проекта при разработке и отправке в продакшн.

    Например,
    – Компиляция файлов препроцессоров в CSS
    – Объединение большого количества файлов стилей в один
    – CSS, JS, HTML, SVG -минификация
    – Сжатие изображений
    – Создание спрайтов из отдельный SVG-файлов
    – Оптимизация и в какой-то степени "валидация" HTML (например, проставить атрибут alt у всех img
    – и много другого
    Ответ написан
    3 комментария
  • Почему gulp не создаёт в папке dist папку img?

    Проблема в пути, который Вы указываете к исходным картинкам.
    Вы вместо очередного слеша указали точку
    Замените этот фрагмент кода
    src: {
            html: "src/*.html",
            js: "src/assets/js/*.js",
            css: "src/assets/sass/style.scss",
            images: "src/assets/img/**.*.{jpg,png,svg,gif,ico}"
        },

    на этот
    src: {
            html: "src/*.html",
            js: "src/assets/js/*.js",
            css: "src/assets/sass/style.scss",
            images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}"
        },


    5dd3a5ae9f11c654047663.png
    Ответ написан