Почему не срабатывает команда npm start?

Question

[DeveloperV]

Файл gulpfile.js

"use strict";

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


gulp.task('style', function() {
    return gulp.src("sass/style.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(postcss([
            autoprefixer()
        ]))
        .pipe(gulp.dest("css"))
        .pipe(server.stream())
});



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

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

Файл package.json

{
  "name": "site",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

При запуске команды npm start выдает такую ошибку в консоле

Answer 1

[srko]

А что именно вы пытаетесь запустить? Gulp или NPM?

Если Gulp, то вы делаете это не совсем правильно, посмотрите в руководстве — он запускается командой «gulp». Но в gulpfile.js есть и другие спорные моменты.

Если NPM скрипт, то у вас отсутствует скрипт «start». Посмотрите файл package.json, там только «"scripts": "test"».

Answer 2

[DeveloperV]

я хотел бы запустить liveserver, чтобы каждый раз не прописывать gulp sass
а вот команда gulp serve не работает, выдает ошибку

λ gulp serve
assert.js:339
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\Users\Varfo\Desktop\site\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\Users\Varfo\Desktop\site\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (C:\Users\Varfo\Desktop\site\gulpfile.js:24:6)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Comments

[srko]

В Gulp 4 изменили создание тасков, которые должны выполнять другие таски. Нельзя больше просто перечислить их списком.

Пример из вашего кода:

gulp.task("serve", ["style"], function() {
    server.init({
        server: "."
    });

Вместо этого они представили команды gulp.series() и gulp.parallel()

И код должен выглядеть как-то так:

gulp.task('serve', gulp.series('style', function(){
      server.init({
        server: "."
    });
}));

Вот тут вроде бы неплохое объяснение Gulp 4 на русском.

[DeveloperV]

srko, оставив только этот код

gulp.task('serve', gulp.series('style', function(){
      server.init({
        server: "."
    });
}));

через команду gulp serve запускается, но при внесении изменений, ничего не меняется
но все равно, спасибо

[srko]

DeveloperV, возможно, нужно переписать gulpfile.js с учетом новой версии.

Что-то такое (код чужой):

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    return gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

Я не запускал ни этот, ни ваш. Просто объяснил где и почему возникают ошибки.

Может быть, если вам тяжело, есть смыл использовать какие-то готовые сборки.

[DeveloperV]

srko, ладно, попробую готовые сборки, спасибо