Gulp выдаёт ошибку. Как решить?

Question

NeonCoder @NeonCoder

Gulp.js

Gulp выдаёт ошибку. Как решить?

Прохожу курс по вёрстке от WebForMySelf и в 3 уроке мы собираем проект на Gulp. Делал всё по уроку, только удалил модуль pngquant(он у меня не работает, пишет, что система не подходит).
Вот package.json

{
  "name": "fashion",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp build",
    "start": "npm run build && gulp serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "del": "^4.1.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-cheerio": "^0.6.3",
    "gulp-imagemin": "^5.0.3",
    "gulp-plumber": "^1.2.1",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-svgmin": "^2.2.0",
    "imagemin-jpeg-recompress": "^6.0.0",
    "run-sequence": "^2.2.1"
  }
}

Вот сам gulpfile.js (мой)

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');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');

gulp.task('sass', function () {
  return gulp.src('scss/style.scss')
      .pipe(plumber())
      .pipe(sourceMaps.init())
      .pipe(sass())
      .pipe(autoprefixer({
        browsers: ['last 2 version']
      }))
      .pipe(sourceMaps.write())
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('html', function () {
  return gulp.src('*.html')
      .pipe(gulp.dest('build'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('js', function () {
  return gulp.src('js/**/*.js')
      .pipe(gulp.dest('build/js'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('css', function () {
  return gulp.src('css/**/*.css')
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('allimg', function () {
  return gulp.src('img/**/*.jpg')
      .pipe(gulp.dest('build/img'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('images', function () {
  return gulp.src('build/img/**/*.jpg')
      .pipe(imagemin([
          imagemin.jpegtran({progressive: true}),
          imageminJpegRecompress({
            loops: 5,
            min: 65,
            max: 70,
            quality: 'medium'
          }),
          imagemin.optipng({optimizationLevel: 3})
      ]))
      .pipe(gulp.dest('build/img'));
});

gulp.task('svg', function () {
  return gulp.src('img/**/*.svg')
      .pipe(svgmin({
        js2svg: {
          pretty: true
        }
      }))
      .pipe(cheerio({
        run: function ($) {
          $('[fill]').removeAttr('fill');
          $('[stroke]').removeAttr('stroke');
          $('[style]').removeAttr('style');
        },
        parserOptions: {xmlMode: true}
      }))
      .pipe(replace('&gt;', '>'))
      // build svg sprite
      .pipe(svgSprite({
        mode: {
          symbol: {
            sprite: "sprite.svg"
          }
        }
      }))
      .pipe(gulp.dest('build/img'));
});

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

  gulp.watch("scss/**/*.scss", ["sass"]);
  gulp.watch("*.html", ["html"]);
  gulp.watch("js/**/*.js", ["js"]);
  gulp.watch("css/**/*.css", ["css"]);
  gulp.watch("img/**/*.jpg", ["allimg"]);
  gulp.watch("img/**/*.{svg}", ["svg"]);
});

gulp.task('copy', function () {
  return gulp.src([
      'img/**',
      'js/**',
      'css/**',
      '*.html'
  ], {
    base: '.'
  })
      .pipe(gulp.dest('build'));

});

gulp.task('clean', function () {
  return del('build');
});

gulp.task('build', function (fn) {
  run(
    'clean',
    'copy',
    'sass',
    'images',
    'svg',
    fn
  );
});

Вот изначальный

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');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const pngquant = require('imagemin-pngquant');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');

gulp.task('sass', function () {
  return gulp.src('scss/style.scss')
      .pipe(plumber())
      .pipe(sourceMaps.init())
      .pipe(sass())
      .pipe(autoprefixer({
        browsers: ['last 2 version']
      }))
      .pipe(sourceMaps.write())
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('html', function () {
  return gulp.src('*.html')
      .pipe(gulp.dest('build'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('js', function () {
  return gulp.src('js/**/*.js')
      .pipe(gulp.dest('build/js'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('css', function () {
  return gulp.src('css/**/*.css')
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('allimg', function () {
  return gulp.src('img/**/*.{png,jpg}')
      .pipe(gulp.dest('build/img'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('images', function () {
  return gulp.src('build/img/**/*.{png,jpg}')
      .pipe(imagemin([
          imagemin.jpegtran({progressive: true}),
          imageminJpegRecompress({
            loops: 5,
            min: 65,
            max: 70,
            quality: 'medium'
          }),
          imagemin.optipng({optimizationLevel: 3}),
          pngquant({quality: '65-70', speed: 5})
      ]))
      .pipe(gulp.dest('build/img'));
});

gulp.task('svg', function () {
  return gulp.src('img/**/*.svg')
      .pipe(svgmin({
        js2svg: {
          pretty: true
        }
      }))
      .pipe(cheerio({
        run: function ($) {
          $('[fill]').removeAttr('fill');
          $('[stroke]').removeAttr('stroke');
          $('[style]').removeAttr('style');
        },
        parserOptions: {xmlMode: true}
      }))
      .pipe(replace('&gt;', '>'))
      // build svg sprite
      .pipe(svgSprite({
        mode: {
          symbol: {
            sprite: "sprite.svg"
          }
        }
      }))
      .pipe(gulp.dest('build/img'));
});

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

  gulp.watch("scss/**/*.scss", ["sass"]);
  gulp.watch("*.html", ["html"]);
  gulp.watch("js/**/*.js", ["js"]);
  gulp.watch("css/**/*.css", ["css"]);
  gulp.watch("img/**/*.{png,jpg}", ["allimg"]);
  gulp.watch("img/**/*.{svg}", ["svg"]);
});

gulp.task('copy', function () {
  return gulp.src([
      'img/**',
      'js/**',
      'css/**',
      '*.html'
  ], {
    base: '.'
  })
      .pipe(gulp.dest('build'));

});

gulp.task('clean', function () {
  return del('build');
});

gulp.task('build', function (fn) {
  run(
    'clean',
    'copy',
    'sass',
    'images',
    'svg',
    fn
  );
});

Вопрос задан более трёх лет назад
566 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

NeonCoder @NeonCoder Автор вопроса

Сама ошибка:

[15:18:45] Using gulpfile D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\gulpfile.js
[15:18:45] Starting 'build'...
[15:18:45] 'build' errored after 6.08 ms
[15:18:45] TypeError: gulp.hasTask is not a function
at D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:23:22
at Array.forEach ()
at verifyTaskSets (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:17:11)
at runSequence (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:130:2)
at D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\gulpfile.js:126:3
at taskWrapper (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fashion@1.0.0 build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fashion@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Andrew\AppData\Roaming\npm-cache\_logs\2019-04-06T12_18_45_559Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fashion@1.0.0 start: `npm run build && gulp serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fashion@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Andrew\AppData\Roaming\npm-cache\_logs\2019-04-06T12_18_45_644Z-debug.log

D:\яяяяяяя\Program NeFiles\курс по вёрстке\www>gulp -v
"gulp" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.

D:\яяяяяяя\Program NeFiles\курс по вёрстке\www>npm gulp -v
6.4.1

D:\яяяяяяя\Program NeFiles\курс по вёрстке\www>npm start

> fashion@1.0.0 start D:\яяяяяяя\Program NeFiles\курс по вёрстке\www
> npm run build && gulp serve

> fashion@1.0.0 build D:\яяяяяяя\Program NeFiles\курс по вёрстке\www
> gulp build

[15:36:39] Using gulpfile D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\gulpfile.js
[15:36:39] Starting 'build'...
[15:36:39] 'build' errored after 9.02 ms
[15:36:39] TypeError: gulp.hasTask is not a function
at D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:23:22
at Array.forEach ()
at verifyTaskSets (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:17:11)
at runSequence (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\run-sequence\index.js:130:2)
at D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\gulpfile.js:126:3
at taskWrapper (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (D:\яяяяяяя\Program NeFiles\курс по вёрстке\www\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fashion@1.0.0 build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fashion@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Andrew\AppData\Roaming\npm-cache\_logs\2019-04-06T12_36_39_126Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fashion@1.0.0 start: `npm run build && gulp serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fashion@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Andrew\AppData\Roaming\npm-cache\_logs\2019-04-06T12_36_39_199Z-debug.log

Написано более трёх лет назад