Gulp не работает (Node + npm + Gulp + PhpStorm) Конфликт версий?

Question

[tory_kuzya]

Установила Node + npm + Gulp.

C:\OpenServer\domains\localhost\projectgulp>node -v
v4.4.5
C:\OpenServer\domains\localhost\projectgulp>npm -v
2.15.5
C:\OpenServer\domains\localhost\projectgulp>gulp -v
[12:18:58] CLI version 3.9.1
[12:18:58] Local version 4.0.0-alpha.2

При выполнении команды

C:\OpenServer\domains\localhost\projectgulp>gulp

появляется ошибка и ничего не появляется в папке build (сюда должно всё билдится, прописано в файле gulpfile.js)

assert.js:90
throw new assert.AssertionError({
^
AssertionError: Task function must be specified
at Gulp.set [as _setTask] (C:\OpenServer\domains\localhost\projectgulp\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\OpenServer\domains\localhost\projectgulp\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\OpenServer\domains\localhost\projectgulp\gulpfile.js:171:6)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Liftoff.handleArguments (C:\Users\ShipGo\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3)

Может конфликт версий Node и Gulp? Что делать? Как исправить?

Comments

[tory_kuzya]

'use strict';

var gulp = require('gulp'), //основной плагин gulp
    //stylus = require('gulp-stylus'), //препроцессор stylus
    less = require('gulp-less'),    //препроцессор less
    prefixer = require('gulp-autoprefixer'), //расставление автопрефиксов
    csso = require('gulp-csso'),    //структурная минимизация CSS
    //cssmin = require('gulp-minify-css'), //минификация css
    uglify = require('gulp-uglify'), //минификация js
    jshint = require("gulp-jshint"), //отслеживание ошибкок в js
    rigger = require('gulp-rigger'), //работа с инклюдами в html и js
    imagemin = require('gulp-imagemin'), //минимизация изображений
    spritesmith = require("gulp.spritesmith"), //объединение картинок в спрайты
    rimraf = require('rimraf'), //очистка
    sourcemaps = require('gulp-sourcemaps'), //sourcemaps
    rename = require("gulp-rename"), //переименвоание файлов
    plumber = require("gulp-plumber"), //предохранитель для остановки гальпа
    watch = require('gulp-watch'), //расширение возможностей watch
    connect = require('gulp-connect'); //livereload


var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/css/images/',
        fonts: 'build/fonts/',
        htaccess: 'build/',
        contentImg: 'build/img/',
        sprites: 'src/css/images/',
        spritesCss: 'src/css/partial/'
    },
    src: { //Пути откуда брать исходники
        html: 'src/template/*.html', //Синтаксис src/template/*.html говорит gulp что мы хотим взять все файлы с расширением .html
        js: 'src/js/[^_]*.js',//В стилях и скриптах нам понадобятся только main файлы
        jshint: 'src/js/*.js',
        css: 'src/css/styles.styl',
        cssVendor: 'src/css/vendor/*.*', //Если мы хотим файлы библиотек отдельно хранить то раскоментить строчку
        img: 'src/css/images/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        fonts: 'src/fonts/**/*.*',
        contentImg: 'src/img/**/*.*',
        sprites: 'src/css/sprites/*.png',
        htaccess: 'src/.htaccess'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html: 'src/template/**/*.html',
        js: 'src/js/**/*.js',
        css: 'src/css/**/*.*',
        img: 'src/css/images/**/*.*',
        contentImg: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*',
        htaccess: 'src/.htaccess',
        sprites: 'src/css/sprites/*.png'
    },
    clean: './build', //директории которые могут очищаться
    outputDir: './build' //исходная корневая директория для запуска минисервера
};

// Локальный сервер для разработки
gulp.task('connect', function(){
    connect.server({ //настриваем конфиги сервера
        root: [path.outputDir], //корневая директория запуска сервера
        port: 9999, //какой порт будем использовать
        livereload: true //инициализируем работу LiveReload
    });
});

// таск для билдинга html
gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //выгрузим их в папку build
        .pipe(connect.reload()) //И перезагрузим наш сервер для обновлений
});

// проверка js на ошибки и вывод их в консоль
gulp.task('jshint:build', function() {
    return gulp.src(path.src.jshint) //выберем файлы по нужному пути
        .pipe(jshint()) //прогоним через jshint
        .pipe(jshint.reporter('jshint-stylish')); //стилизуем вывод ошибок в консоль
});

// билдинг яваскрипта
gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(rename({suffix: '.min'})) //добавим суффикс .min к выходному файлу
        .pipe(gulp.dest(path.build.js)) //выгрузим готовый файл в build
        .pipe(connect.reload()) //И перезагрузим сервер
});

// билдим спрайты
gulp.task('sprites:build', function () {
    var spriteData =
        gulp.src(path.src.sprites) //выберем откуда брать изображения для объединения в спрайт
            .pipe(spritesmith({
                imgName: 'sprite.png', //имя спрайтового изображения
                cssName: 'sprite.styl', //имя стиля где храним позиции изображений в спрайте
                imgPath: 'images/sprite.png', //путь где лежит спрайт
                cssFormat: 'less', //формат в котором обрабатываем позиции
                cssTemplate: 'less.template.mustache', //файл маски
                cssVarMap: function(sprite) {
                    sprite.name = 's-' + sprite.name //имя каждого спрайта будет состоять из имени файла и конструкции 's-' в начале имени
                }
            }));
    spriteData.img.pipe(gulp.dest(path.build.sprites)); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest(path.build.spritesCss)); // путь, куда сохраняем стили
});

// билдим статичные изображения
gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true, //сжатие .jpg
            svgoPlugins: [{removeViewBox: false}], //сжатие .svg
            interlaced: true, //сжатие .gif
            optimizationLevel: 3 //степень сжатия от 0 до 7
        }))
        .pipe(gulp.dest(path.build.img)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

// билдим динамичные изображения
gulp.task('imagescontent:build', function() {
    gulp.src(path.src.contentImg)
        .pipe(imagemin({ //Сожмем их
            progressive: true, //сжатие .jpg
            svgoPlugins: [{removeViewBox: false}], //сжатие .svg
            interlaced: true, //сжатие .gif
            optimizationLevel: 3 //степень сжатия от 0 до 7
        }))
        .pipe(gulp.dest(path.build.contentImg)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

// билдинг домашнего css
gulp.task('cssOwn:build', function () {
    gulp.src(path.src.css) //Выберем наш основной файл стилей
        .pipe(sourcemaps.init()) //инициализируем soucemap
        .pipe(less({
            compress: true,
            'include css': true
        })) //Скомпилируем less
        .pipe(prefixer({
            browser: ['last 50 version', "> 1%", "ie 8", "ie 7"]
        })) //Добавим вендорные префиксы
        .pipe(csso())   //структурная минимизация CSS
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write()) //пропишем sourcemap
        .pipe(rename({suffix: '.min'})) //добавим суффикс .min к имени выходного файла
        .pipe(gulp.dest(path.build.css)) //вызгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

// билдинг вендорного css
gulp.task('cssVendor:build', function () {
    gulp.src(path.src.cssVendor) // Берем папку vendor
        .pipe(sourcemaps.init()) //инициализируем soucemap
        .pipe(csso())   //структурная минимизация CSS
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write()) //пропишем sourcemap
        .pipe(gulp.dest(path.build.css)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

// билдим css целиком
gulp.task('css:build', [
    'cssOwn:build',
    // 'cssVendor:build'
]);

// билдим шрифты
gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts)) //выгружаем в build
});

// билдим htaccess
gulp.task('htaccess:build', function() {
    gulp.src(path.src.htaccess)
        .pipe(gulp.dest(path.build.htaccess)) //выгружаем в build
});

// билдим все
gulp.task('build', [
    'html:build',
    'jshint:build',
    'js:build',
    'sprites:build',
    'css:build',
    'fonts:build',
    'htaccess:build',
    'image:build',
    'imagescontent:build'
]);

// чистим папку билда
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

// watch
gulp.task('watch', function(){
     //билдим html в случае изменения
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
     //билдим спрайты в случае изменения
    watch([path.watch.sprites], function(event, cb) {
        gulp.start('sprites:build');
    });
     //билдим контекстные изрображения в случае изменения
    watch([path.watch.contentImg], function(event, cb) {
        gulp.start('imagescontent:build');
    });
     //билдим css в случае изменения
    watch([path.watch.css], function(event, cb) {
        gulp.start('css:build');
    });
     //проверяем js в случае изменения
    watch([path.watch.js], ['jshint']);
     //билдим js в случае изменения
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
     //билдим статичные изображения в случае изменения
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
     //билдим шрифты в случае изменения
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
     //билдим htaccess в случае изменения
    watch([path.watch.htaccess], function(event, cb) {
        gulp.start('htaccess:build');
    });
});

// действия по умолчанию
gulp.task('default', ['build', 'watch', 'connect']);

[sergey]

я с виндой не работаю, и конфликтов в ней не понимаю.
но скорее всего проблема с версией ноды v4.4.5 - уж очень старая версия

[tory_kuzya]

Дело в том, что стояла версия 6 и было тоже самое. Тут
https://www.youtube.com/watch?v=_BFWG82mMkw&list=P...
в комментариях прочитала

чтобы заработал пример в ролике нужна действительно gulp 4

Еще нада node-v4.4.5
v6.2.0 не катит)я думал поставлю себе самую новоую,а потом ловил ошибки постояно

Answer 1

[monochromer]

Похоже, локально установлен Gulp версии 4, тогда как код тасков написан для Gulp <= 3

Comments

[tory_kuzya]

Если установить Gulp 3, всё заработает (учитывая версию Node 4)?

[monochromer]

Попробуйте

[tory_kuzya]

Вот в такой конфигурации работает:

C:\OpenServer\domains\localhost\projectgulp>node -v
v6.11.1

C:\OpenServer\domains\localhost\projectgulp>npm -v
3.10.10

C:\OpenServer\domains\localhost\projectgulp>gulp -v
[08:05:36] CLI version 3.9.1
[08:05:36] Local version 3.9.1

Я конечно сильно урезала gulpfile.js:

var gulp = require('gulp'), // Подключаем Gulp
less = require('gulp-less'), //Подключаем less пакет,
browserSync = require('browser-sync'), // Подключаем Browser Sync
concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
del = require('del'), // Подключаем библиотеку для удаления файлов и папок
imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
// pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
// cache = require('gulp-cache'), // Подключаем библиотеку кеширования
autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов npm install gulp-uglifyjs --save-dev

var csso = require('gulp-csso');

gulp.task('default', function() {
gulp.src('./src/css/**/*.less')
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('./dist/css/'))
;
});