Каждый раз, когда я запускаю что-нибудь в gulp, я получаю сообщение об ошибке. - Должна быть указана функция задачи

102

Я пытаюсь запустить приведенную ниже команду, но, к сожалению, сталкиваюсь с ошибками. 

$ gulp build

В моем терминале и я получаю эту ошибку утверждения. Я удалил node и NPM и снова установил его с помощью brew - как полностью удалить Node.js и переустановить с самого начала (Mac OS X) с помощью этих шагов. Моя версия узла - v10.5.0, а версия npm - 6.1.0.

Моя система - MacOS High Sierra 10.13.2 

assert.js:269
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (bulkit/startup-kit/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (startup-kit/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> 
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)

package.json

{
    "name": "bulkit-startup",
    "version": "0.0.1",
    "description": "Bulkit Startup Kit",
    "main": "Gruntfile.js",
    "devDependencies": {
        "autoprefixer": "^6.3.6",
        "browser-sync": "^2.24.5",
        "gulp": "^4.0.0",
        "gulp-clean": "^0.3.2",
        "gulp-concat": "^2.6.0",
        "gulp-postcss": "^6.1.0",
        "gulp-sass": "^2.2.0",
        "gulp-sourcemaps": "^1.6.0",
        "jquery": "^3.3.1",
        "mq4-hover-shim": "^0.3.0",
        "panini": "^1.3.0",
        "rimraf": "^2.5.2"
    },
    "engines": {
        "node": ">=0.10.1"
    },
    "scripts": {
        "start": "gulp",
        "build": "gulp build"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/cssninjaStudio/bulkit.git"
    },
    "bugs": {
        "url": "https://github.com/cssninjaStudio/bulkit/issues",
        "email": "support@cssninja.io"
    },
    "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io/themes/bulkit)",
    "license": "Commercial",
    "private": true,
    "dependencies": {
        "bulma": "^0.7.0",
        "del": "^3.0.0",
        "jquery-waypoints": "^2.0.5",
        "jquery.counterup": "^2.1.0",
        "scrollreveal": "^3.4.0",
        "slick-carousel": "^1.8.1",
        "wallop": "^2.4.1"
    }
}

gulpfile.js

var gulp = require('gulp');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mq4HoverShim = require('mq4-hover-shim');
var rimraf = require('rimraf').sync;
var browser = require('browser-sync');
var panini = require('panini');
var concat = require('gulp-concat');
var port = process.env.SERVER_PORT || 8080;
var nodepath =  'node_modules/';
var assetspath =  'assets/';

// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
    browser.init({server: './_site', port: port});
});

// Watch files for changes
gulp.task('watch', function() {
    gulp.watch('scss/**/*', ['compile-scss', browser.reload]);
    gulp.watch('sass/**/*', ['compile-sass', browser.reload]);
    gulp.watch('js/**/*', ['copy-js', browser.reload]);
    gulp.watch('images/**/*', ['copy-images', browser.reload]);
    gulp.watch('html/pages/**/*', ['compile-html']);
    gulp.watch(['html/{layouts,includes,helpers,data}/**/*'], ['compile-html:reset','compile-html']);
    gulp.watch(['./src/{layouts,partials,helpers,data}/**/*'], [panini.refresh]);
});

// Erases the dist folder
gulp.task('reset', function() {
    rimraf('bulma/*');
    rimraf('scss/*');
    rimraf('assets/css/*');
    rimraf('assets/fonts/*');
    rimraf('images/*');
});

// Erases the dist folder
gulp.task('clean', function() {
    rimraf('_site');
});

// Copy Bulma filed into Bulma development folder
gulp.task('setupBulma', function() {
    //Get Bulma from node modules
    gulp.src([nodepath + 'bulma/*.sass']).pipe(gulp.dest('bulma/'));
    gulp.src([nodepath + 'bulma/**/*.sass']).pipe(gulp.dest('bulma/'));
});

// Copy static assets
gulp.task('copy', function() {
    //Copy other external font and data assets
    gulp.src(['assets/fonts/**/*']).pipe(gulp.dest('_site/assets/fonts/'));
    gulp.src([nodepath + 'slick-carousel/slick/fonts/**/*']).pipe(gulp.dest('_site/assets/css/fonts/'));
    gulp.src([nodepath + 'slick-carousel/slick/ajax-loader.gif']).pipe(gulp.dest('_site/assets/css/'));
});

//Theme Sass variables
var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'compressed',
    includePaths: [nodepath + 'bulma/sass']
};

//Theme Scss variables
var scssOptions = {
    errLogToConsole: true,
    outputStyle: 'compressed',
    includePaths: ['./scss/partials']
};

// Compile Bulma Sass
gulp.task('compile-sass', function () {
    var processors = [
        mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
        autoprefixer({
            browsers: [
                "Chrome >= 45",
                "Firefox ESR",
                "Edge >= 12",
                "Explorer >= 10",
                "iOS >= 9",
                "Safari >= 9",
                "Android >= 4.4",
                "Opera >= 30"
            ]
        })//,
        //cssnano(),
    ];
    //Watch me get Sassy
    return gulp.src('./bulma/bulma.sass')
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./_site/assets/css/'));
});

// Compile Theme Scss
gulp.task('compile-scss', function () {
    var processors = [
        mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
        autoprefixer({
            browsers: [
                "Chrome >= 45",
                "Firefox ESR",
                "Edge >= 12",
                "Explorer >= 10",
                "iOS >= 9",
                "Safari >= 9",
                "Android >= 4.4",
                "Opera >= 30"
            ]
        })//,
        //cssnano(),
    ];
    //Watch me get Sassy
    return gulp.src('./scss/core.scss')
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./_site/assets/css/'));
});

// Compile Html
gulp.task('compile-html', function() {
    gulp.src('html/pages/**/*.html')
        .pipe(panini({
        root: 'html/pages/',
        layouts: 'html/layouts/',
        partials: 'html/includes/',
        helpers: 'html/helpers/',
        data: 'html/data/'
    }))
        .pipe(gulp.dest('_site'))
        .on('finish', browser.reload);
});

gulp.task('compile-html:reset', function(done) {
    panini.refresh();
    done();
});

// Compile css from node modules
gulp.task('compile-css', function() {
    return gulp.src([ 
        nodepath + 'slick-carousel/slick/slick.css',
        nodepath + 'slick-carousel/slick/slick-theme.css',
        nodepath + 'wallop/css/wallop.css',
        //Additional static css assets
        assetspath + 'css/icons.min.css',
    ])
        .pipe(concat('app.css'))
        .pipe(gulp.dest('./_site/assets/css/'));
});

// Compile js from node modules
gulp.task('compile-js', function() {
    return gulp.src([ 
        nodepath + 'jquery/dist/jquery.min.js', 
        nodepath + 'slick-carousel/slick/slick.min.js', 
        nodepath + 'scrollreveal/dist/scrollreveal.min.js',
        nodepath + 'waypoints/lib/jquery.waypoints.min.js',
        nodepath + 'waypoints/lib/shortcuts/sticky.min.js',
        nodepath + 'jquery.counterup/jquery.counterup.min.js',
        nodepath + 'wallop/js/Wallop.min.js',
        //Additional static js assets
        assetspath + 'js/ggpopover/ggpopover.min.js',
        assetspath + 'js/ggpopover/ggtooltip.js',
        assetspath + 'js/embed/embed.js',
        assetspath + 'js/gmap/gmap.min.js',
    ])
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./_site/assets/js/'));
});

//Copy Theme js to production site
gulp.task('copy-js', function() {
    gulp.src('js/**/*.js')
        .pipe(gulp.dest('./_site/assets/js/'));
});

//Copy images to production site
gulp.task('copy-images', function() {
    gulp.src('images/**/*')
        .pipe(gulp.dest('./_site/assets/images/'));
});

gulp.task('init', ['setupBulma']);
gulp.task('build', ['clean','copy', 'compile-js', 'compile-css', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-images']);
gulp.task('default', ['server', 'watch']);
gulp gulp-watch Артур Чыонг
источник

Ответы:

167

Gulp 4.0 изменил способ определения задач, если задача зависит от выполнения другой задачи. Параметр списка устарел.

Пример из вашего gulpfile.js:

// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
  browser.init({server: './_site', port: port});
});

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

Эту задачу нужно изменить примерно так:

// Starts a BrowerSync instance
gulp.task('server', gulp.series('build', function(){
  browser.init({server: './_site', port: port});
}));

Я не эксперт в этом. Вы можете увидеть более надежный пример в документации gulp для последовательного выполнения задач. по gulp или в следующих замечательных сообщениях в блоге Джея Томпкинса и Стефана Баумгартнера.

https://codeburst.io/switching-to-gulp-4-0-271ae63530c0

https://fettblog.eu/gulp-4-parallel-and-series/

standevenjw
источник
2
Это меняет мою ошибку с Task must be specifiedна Task never defined.
2540625,
@ 2540625 Я надеюсь, что в конце концов вы все это рассортировали, но у меня была такая же проблема, пока я не переместил определение gulp.task с вызовами series () / parallel () ниже, где были определены указанные там задачи. Это было похоже на классическую ошибку javascript при попытке использовать функцию до того, как она была определена.
Джон
51

Попробуйте заменить последнюю строку gulpfile.js

gulp.task('default', ['server', 'watch']);

с участием

gulp.task('default', gulp.series('server', 'watch'));
Ариф И.
источник
1
коротко и полезно :)
ehsan
22

Понизьте версию gulp в файле package.json до 3.9.1- 

"gulp": "^3.9.1",
Самьяк Джайн
источник
6
Не делайте этого, если вы используете Node v10.
bbsimonbb
1
@bbsimonbb не могли бы вы рассказать об этом подробнее?
Анри
2
@Henri Version 4 изменил способ запуска задач, поэтому для работы его текущего кода ему нужно запустить gulp 3.9.1. Но лучший ответ - обновить его код, чтобы он был совместим с
gulp
14

Вам не нужно понижать уровень gulp с gulp 4 . Используйте gulp.series () для объединения нескольких задач. Сначала установите gulp глобально с помощью

npm install --global gulp-cli

а затем установите локально в рабочий каталог с помощью

npm install --save-dev gulp

подробности здесь

Пример:

package.json

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.2"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7"
  }
}

gulpfile.js

var gulp = require("gulp");
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

// Specific Task
function js() {
    return gulp
    .src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest('src/js'))
    .pipe(browserSync.stream());
}
gulp.task(js);

// Specific Task
function gulpSass() {
    return gulp
    .src(['src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
}
gulp.task(gulpSass);

// Run multiple tasks
gulp.task('start', gulp.series(js, gulpSass));

Запуск, gulp startчтобы запустить несколько задач и запустить gulp jsили gulp gulpSassдля конкретной задачи.

Мотахар Хоссейн
источник
1
Это было достаточно близко. Пришлось проверить веб-сайт Gulp, чтобы получить правильный синтаксис и добавить экспорт.
Люк Пуплетт
10

https://fettblog.eu/gulp-4-parallel-and-series/

Потому что gulp.task(name, deps, func)был заменен на gulp.task(name, gulp.{series|parallel}(deps, func)).

Вы используете последнюю версию gulp, но более старый код . Измените код или перейдите на более раннюю версию.

Ashim Sth
источник
6

Я получаю ту же ошибку при использовании Gulp. Решение - перейти на Gulp версии 3.9.1 как для локальной версии, так и для версии CLI.

sudo npm install -g gulp@3.9.1

Запускаем в папке проекта

npm install gulp@3.9.1
Джопи
источник
3

Постоянно менять версии gulp и npm, чтобы исправить ошибки, нехорошо. В последние дни после переустановки моей рабочей машины у меня было несколько исключений. И потратил кучу минут на их переустановку и исправление.

Итак, я решил обновить все до последних версий: 

npm -v : v12.13.0 
node -v : 6.13.0
gulp -v : CLI version: 2.2.0 Local version: 4.0.2

Эта ошибка возникает из-за того, как она закодирована в вашем gulpfile, но не из-за несоответствия версии. Итак, здесь вам нужно изменить 2 вещи в gulpfile, чтобы они соответствовали Gulp версии 4. Gulp 4 изменил способ запуска задачи, чем в версии 3.

  1. В версии 4 вы должны определить задачу как функцию, прежде чем вызывать ее как задачу gulp по ее строковому имени. В V3:

gulp.task ('служить', ['sass'], функция () {..});

Но в V4 должно быть так:

function serve() {
...
}
gulp.task('serve', gulp.series(sass));
  1. Как упоминал @Arthur, вам необходимо изменить способ передачи аргументов в функцию задачи. В V3 было так:

gulp.task ('служить', ['sass'], функция () {...});

Но в V4 это должно быть: 

gulp.task('serve', gulp.series(sass));
Сади
источник
1

Проблема в том, что вы используете gulp 4, а синтаксис в gulfile.js - gulp 3. Так что либо понизьте версию gulp до 3.xx, либо используйте синтаксис gulp 4.

Синтаксис Gulp 3:

gulp.task('default', ['sass'], function() {....} );

Синтаксис Gulp 4:

gulp.task('default', gulp.series(sass), function() {....} );

Вы можете узнать больше о задачах gulp и gulp на: https://medium.com/@sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81

Анушил Кумар
источник
-4

Шаги:

  1. "глоток": "^ 3.9.1",
  2. npm install
  3. стили глотка
Dann
источник