Setiap kali saya menelan apa pun, saya mendapatkan kesalahan pernyataan. - Fungsi tugas harus ditentukan

108

Saya mencoba menjalankan perintah di bawah ini tetapi sayangnya saya mengalami kesalahan. 

$ gulp build

Di terminal saya dan saya mendapatkan kesalahan pernyataan ini. Saya telah menghapus node dan NPM dan menginstal ulang lagi menggunakan brew - Bagaimana cara menghapus instalan Node.js sepenuhnya, dan menginstal ulang dari awal (Mac OS X) dengan langkah-langkah ini. Versi node saya adalah v10.5.0 dan versi npm adalah 6.1.0.

Sistem saya adalah 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": "[email protected]"
    },
    "author": "Css Ninja <[email protected]> (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 Arthur Truong
sumber

Jawaban:

176

Gulp 4.0 telah mengubah cara tugas harus didefinisikan jika tugas bergantung pada tugas lain untuk dijalankan. Parameter daftar sudah tidak digunakan lagi.

Contoh dari gulpfile.js Anda adalah:

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

Alih-alih parameter daftar yang mereka perkenalkan gulp.series()dan gulp.parallel().

Tugas ini harus diubah menjadi seperti ini:

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

Saya bukan ahli dalam hal ini. Anda dapat melihat contoh yang lebih kuat dalam dokumentasi gulp untuk menjalankan tugas dalam seri atau berikut ini posting blog yang sangat baik oleh Jhey Thompkins dan Stefan Baumgartner

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

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

standevenjw
sumber
3
Ini mengubah kesalahan saya dari Task must be specifiedmenjadi Task never defined.
2540625
@ 2540625 Saya harap Anda mendapatkan ini diurutkan pada akhirnya tetapi saya memiliki masalah yang sama sampai saya memindahkan definisi gulp.task dengan panggilan series () / parallel () di bawah ini di mana tugas yang dinamai di sana didefinisikan. Sepertinya kesalahan javascript klasik saat mencoba menggunakan fungsi sebelum didefinisikan.
Jon
57

Coba ganti baris terakhir gulpfile.js Anda

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

dengan

gulp.task('default', gulp.series('server', 'watch'));
Arif I.
sumber
1
singkat dan berguna :)
ehsan
21

Turunkan versi gulp Anda di file package.json menjadi 3.9.1- 

"gulp": "^3.9.1",
Samyak Jain
sumber
6
Jangan lakukan ini jika Anda menggunakan Node v10.
bbsimonbb
1
@bbsimonbb bisakah Anda menjelaskannya?
Henri
2
@Henri Versi 4 mengubah cara tugas dijalankan, jadi agar kode saat ini berfungsi, dia perlu menjalankan gulp 3.9.1. Tetapi jawaban yang lebih baik adalah memperbarui kodenya agar kompatibel dengan
gulp
14

Anda tidak perlu menurunkan gulp dari gulp 4 . Gunakan gulp.series () untuk menggabungkan banyak tugas. Pada pemasangan pertama gulp secara global dengan

npm install --global gulp-cli

dan kemudian instal secara lokal di direktori kerja Anda dengan

npm install --save-dev gulp

lihat detailnya di sini

Contoh:

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

Jalankan gulp startuntuk menjalankan beberapa tugas & menjalankan gulp jsatau gulp gulpSassuntuk tugas tertentu.

Motahar Hossain
sumber
1
Ini sudah cukup dekat. Harus memeriksa situs web Gulp untuk mendapatkan sintaks yang benar dan menambahkan ekspor.
Luke Puplett
6

Saya mendapatkan kesalahan yang sama saat menggunakan Gulp. Solusinya adalah dengan beralih ke Gulp versi 3.9.1, baik untuk versi lokal maupun versi CLI.

sudo npm install -g gulp@3.9.1

Jalankan di folder proyek

npm install gulp@3.9.1
Jopie
sumber
3

Tidak baik untuk terus mengubah versi gulp & npm untuk memperbaiki kesalahan. Saya mendapatkan beberapa pengecualian hari terakhir setelah menginstal ulang mesin yang berfungsi. Dan membuang banyak menit untuk menginstal ulang & memperbaikinya.

Jadi, saya memutuskan untuk meningkatkan semua ke versi terbaru: 

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

Kesalahan ini didapat karena bagaimana ia mengkodekan Anda gulpfile tetapi bukan versi yang tidak cocok. Jadi, Di sini Anda harus mengubah 2 hal di gulpfile agar selaras dengan Gulp versi 4. Gulp 4 telah mengubah cara memulai tugas daripada Versi 3.

  1. Di versi 4, Anda harus mendefinisikan tugas sebagai fungsi, sebelum menyebutnya sebagai tugas gulp dengan nama stringnya. Di V3:

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

Tapi di V4 seharusnya seperti ini:

function serve() {
...
}
gulp.task('serve', gulp.series(sass));
  1. Seperti yang telah disebutkan @Arthur, Anda perlu mengubah cara meneruskan argumen ke fungsi tugas. Seperti ini di V3:

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

Namun di V4, seharusnya: 

gulp.task('serve', gulp.series(sass));
Sadee
sumber
1

Masalahnya adalah Anda menggunakan gulp 4 dan sintaks di gulfile.js adalah gulp 3. Jadi, turunkan gulp Anda ke 3.xx atau gunakan sintaks gulp 4.

Sintaksis Gulp 3:

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

Sintaksis 4:

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

Anda dapat membaca lebih lanjut tentang tugas gulp dan gulp di: https://medium.com/@sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81

Anushil Kumar
sumber
-4

Langkah:

  1. "gulp": "^ 3.9.1",
  2. npm install
  3. gaya teguk
Dann
sumber