ทุกครั้งที่ฉันทำงานอึกทึกฉันจะได้รับข้อผิดพลาดในการยืนยัน - ต้องระบุฟังก์ชันงาน


109

ฉันพยายามเรียกใช้คำสั่งด้านล่าง แต่น่าเสียดายที่ฉันพบข้อผิดพลาด

$ gulp build

ในเทอร์มินัลของฉันและฉันได้รับข้อผิดพลาดในการยืนยัน ฉันได้ถอนการติดตั้งโหนดและ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']);

คำตอบ:


176

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});
}));

ฉันไม่ใช่ผู้เชี่ยวชาญด้านนี้ คุณสามารถดูตัวอย่างที่มีประสิทธิภาพมากขึ้นในเอกสารอึกสำหรับการทำงานในซีรีส์หรือโพสต์บล็อกที่ยอดเยี่ยมเหล่านี้โดย Jhey Thompkins และ Stefan Baumgartner

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

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


3
การเปลี่ยนแปลงนี้ข้อผิดพลาดของฉันจากไปTask must be specified Task never defined
2540625

@ 2540625 ฉันหวังว่าคุณจะได้รับการจัดเรียงในที่สุด แต่ฉันก็มีปัญหาเดียวกันจนกว่าฉันจะย้ายคำจำกัดความของ gulp.task ด้วยการเรียก series () / parallel () ด้านล่างซึ่งมีการกำหนดภารกิจที่มีชื่อไว้ ดูเหมือนข้อผิดพลาดของจาวาสคริปต์แบบคลาสสิกในการพยายามใช้ฟังก์ชันก่อนที่จะมีการกำหนด
จอน

58

ลองแทนที่บรรทัดสุดท้ายของ gulpfile.js

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

ด้วย

gulp.task('default', gulp.series('server', 'watch'));

1
สั้นและมีประโยชน์ :)
ehsan

21

ลดเวอร์ชัน gulp ของคุณในไฟล์ package.json เป็น 3.9.1-

"gulp": "^3.9.1",

6
อย่าทำเช่นนี้หากคุณอยู่ใน Node v10
bbsimonbb

1
@bbsimonbb ช่วยอธิบายให้ละเอียดหน่อยได้ไหม?
Henri

2
@Henri เวอร์ชัน 4 เปลี่ยนวิธีเรียกใช้งานดังนั้นเพื่อให้รหัสปัจจุบันของเขาทำงานได้เขาต้องเรียกใช้อึก 3.9.1 แต่คำตอบที่ดีกว่าคือการอัปเดตโค้ดของเขาให้เข้ากันได้กับ gulp 4+
user441058

14

คุณไม่จำเป็นต้องปรับลดอึกของคุณจากอึก 4 ใช้ gulp.series () เพื่อรวมงานต่างๆ ตอนแรกติดตั้งอึกทั่วโลกด้วย

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 เพื่อให้ไวยากรณ์ถูกต้องและเพิ่มการส่งออก
Luke Puplett


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 คุณต้องกำหนดงานเป็นฟังก์ชันก่อนที่จะเรียกมันว่างานอึกตามชื่อสตริง ใน 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

Syntax Gulp 3:

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

Syntax Gulp 4:

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับงานอึกและอึกได้ที่: https://medium.com/@sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.