Как перевести готовую сборку gulp + sass на 4 версию gulp'a?

Question

[jungoboy]

Сам gulpfile.js

spoiler

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var server = require("browser-sync").create();


gulp.task("style", function() {
gulp.src("./site/sass/**/*.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest("./site/css"))
    .pipe(server.stream());
});

gulp.task("serve", ["style"], function () {
    server.init({
        server: "site/.",
        notify: false,
        open: true,
        cors: true,
        ui: false
    });

    gulp.watch("./site/**/*.scss", ["style"]);
    gulp.watch("*.html").on("change", server.reload);
});

Никак не могу переписать его, помогите пожалуйста...

upd: Кому не влом помочь новичку? Скажите какие команды нужно прописать, чтобы запустить проект с обновлённым gulpfile.js
- Ссылка на весь проект: (со старым gulpfile.js) *Тык*

Comments

[Даниил Маслов]

просто код сюда не могли залить?

[sim3x]

Код вставьте в текст вопроса
Используйте меню редактора "Втавить исходный код"

Покажите, что вы уже сделали и покажите полный текст ошибок

[jungoboy]

s0xzwasd, Извиняюсь...

[jungoboy]

s0xzwasd, Вот код:

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var server = require("browser-sync").create();


gulp.task("style", function() {
gulp.src("./site/sass/**/*.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest("./site/css"))
    .pipe(server.stream());
});

gulp.task("serve", ["style"], function () {
    server.init({
        server: "site/.",
        notify: false,
        open: true,
        cors: true,
        ui: false
    });

    gulp.watch("./site/**/*.scss", ["style"]);
    gulp.watch("*.html").on("change", server.reload);
});

[sim3x]

jungoboy, вы можете сами редактировать ваш вопрос

Покажите, что вы уже сделали и покажите полный текст ошибок

[jungoboy]

sim3x, Я удалил всё то, что я уже сделал. Этот галп файл делал с группой людей (на курсы ходил), сейчас решил взять этот проект, но он не запускался, благодаря этому сайту, мне объяснили что в готовом проекте (который делался на курсах) устаревший галп, а я ставлю локальный галп 4.0+ Поэтому и он не работает. Мне сказали переписать gulpfile.js, но я и css толком не знаю, про JS - вообще молчу..

Поэтому и прошу о помощи.

[jungoboy]

sim3x, Я обновил вопрос, добавив весь проект в архиве, прошу помогите...

[sim3x]

jungoboy, уберите линк на мегу - если у вас много файлов залейте их на гитхаб
Иначе - добавьте их всех в текст вопроса

[jungoboy]

sim3x, Но по сути, перевести ведь нужно только gulpfile.js, разве не так? Или есть огромная синтаксическая разница в сурсах проекта после перевода gulp'a на 4+ версию?

Answer 1

[Даниил Маслов]

Сначала в консоли (если ранее не устанавливали): npm i -g gulp-cli

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var server = require("browser-sync").create();


gulp.task("style", function() {
  return gulp.src("./site/sass/**/*.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest("./site/css"))
    .pipe(server.stream());
});

gulp.task("serve", gulp.series(["style"], function () {
  server.init({
      server: "site/.",
      notify: false,
      open: true,
      cors: true,
      ui: false
  });

  gulp.watch("./site/**/*.scss", gulp.parallel(["style"]));
  gulp.watch("*.html").on("change", server.reload);
}));

Работу именно на вашем проекте не проверял, если будут ошибки — пишите в комментариях какие.

Comments

[jungoboy]

gulp-cli установился без ошибок. Скрин:

spoiler

*CTRL + C и CTRL + V Написанного вами кода в gulpfile.js проекта:

spoiler

npm iв корне проекта (там где галпфайл | Много ошибок):

spoiler

[jungoboy]

s0xzwasd, Собственно вот package.json:

spoiler

[Даниил Маслов]

jungoboy, удалите свой package-lock.json, непонятно каким он здесь вообще боком и переустановите зависимости снова

[jungoboy]

s0xzwasd,
Я удалил именно package-lock.json, а package.json оставил. - это для разъяснения.
Лог: (Так и должно быть?)

[Даниил Маслов]

jungoboy, https://yadi.sk/d/eXivvHLS7QkwQA — посмотрите, что я сделал и как

[jungoboy]

s0xzwasd, Мне заного устанавливать модули? Или что мне сделать, я делал всё по вашим указаниям.

upd: Архив перекачал, открылся, мне опять удалять package-lock.json? и опять писать npm i?

[Даниил Маслов]

jungoboy, да, заново, во-первых у вас в проекте галп был 3 версии, во вторых в таске gulp.task нужно возвращать значение return gulp.src и в третьих установить зависимость npm install natives@1.1.6 (уже есть в проекте, который я отправил)

[Даниил Маслов]

jungoboy, package должен выглядеть так

{
  "name": "adapt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "4.0.0",
    "gulp-sass": "^4.0.2",
    "natives": "^1.1.6"
  },
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp-plumber": "^1.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

[Даниил Маслов]

jungoboy, чтобы быстро всё это переустановить в консоли выполните rm -rf node_modules && npm install

[jungoboy]

s0xzwasd,

[Даниил Маслов]

jungoboy, так, и? ничего ужасного нет в этом выводе, запускайте галп таски

[Даниил Маслов]

jungoboy, если подписано WARN, то это означает лишь предупреждение, чтобы вы проверили, всё ли сделали правильно.

[jungoboy]

Ааааа Спасибо большое!!! 2 дня не мог сделать!!! Как можно отблагодарить?

[Даниил Маслов]

jungoboy, отметить решением вопрос

[jungoboy]

s0xzwasd, Ещё раз спасибо

Answer 2

[Андрей]

https://youtu.be/kesyrCZE1bA