Почему не запускается команда gulp serve?

Question

[Валерия]

приходится запускать таски по очереди. это глупо, но иначе билд не работает. кто поможет найти ошибку. спасибо

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. приходится перечислять все три таска поочередно.

Comments

[Михаил]

https://gulpjs.com/docs/en/getting-started/creatin...

[Валерия]

Михаил, спасибо за мануал! пока вопрос не решила.

[Михаил]

Валерия,
gulpfile

module.exports.serve = () => {
  console.log('here');
};

➜  temp npx gulp serve                                                                                                                                                        
[00:56:44] Using gulpfile ~/Documents/temp/gulpfile.js
[00:56:44] Starting 'serve'...
here
[00:56:44] The following tasks did not complete: serve
[00:56:44] Did you forget to signal async completion?

[Валерия]

Михаил, не хочу я забыть. мне настроить надо бы

[Рома Зварич]

Валерия, что значит "не запускается команда gulp serve?".
В чём это проявляется?
Ошибку в консоли выдаёт или что-то другое?
У меня запустилось без проблем

[Валерия]

Рома Зварич, если первый раз запускаете - может сработать. но если удалите папку builde и снова запустите gulp serve, то папка builde не сформируется, браузер не запустится, а изменения в коде никак не будут просматриваться интерактивно в браузере. в этом проблема. спасибо

Answer 1

[Рома Зварич]

Добавьте задачу, которая будет запускать последовательно нужные команды за Вас.

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'));

Comments

[Валерия]

Роман, спасибо Вам огромное! класс =) проект собирается в папку build. Красота!

Answer 2

[inkShio]

Может поможет тык-тык

Comments

[Валерия]

интересно. попробую. спасибо