Cada vez que ejecuto gulp cualquier cosa, aparece un error de afirmación. - Se debe especificar la función de la tarea

102

Estoy tratando de ejecutar el comando a continuación, pero desafortunadamente me encuentro con errores. 

$ gulp build

En mi terminal y obtengo este error de afirmación. Desinstalé node y NPM y los reinstalé nuevamente usando brew - ¿Cómo desinstalo completamente Node.js y lo reinstalo desde el principio (Mac OS X) con estos pasos? Mi versión de nodo es v10.5.0 y la versión npm es 6.1.0.

Mi sistema es 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
fuente

Respuestas:

167

Gulp 4.0 ha cambiado la forma en que se deben definir las tareas si la tarea depende de otra tarea para ejecutar. El parámetro de lista ha quedado obsoleto.

Un ejemplo de su gulpfile.js sería:

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

En lugar del parámetro de lista, han introducido gulp.series()y gulp.parallel().

Esta tarea debería cambiarse a algo como esto:

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

No soy un experto en esto. Puede ver un ejemplo más sólido en la documentación de gulp para ejecutar tareas en serie o en estas excelentes publicaciones de blog de Jhey Thompkins y Stefan Baumgartner

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

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

standevenjw
fuente
2
Esto cambia mi error de Task must be specifieda Task never defined.
2540625
@ 2540625 Espero que haya solucionado esto al final, pero tuve el mismo problema hasta que moví la definición de gulp.task con las llamadas series () / paralelo () debajo de donde se definieron las tareas nombradas allí. Parecía el clásico error de JavaScript de intentar utilizar una función antes de que se definiera.
Jon
51

Intente reemplazar su última línea de gulpfile.js

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

con

gulp.task('default', gulp.series('server', 'watch'));
Arif I.
fuente
1
breve y útil :)
ehsan
22

Baje su versión de gulp en el archivo package.json a 3.9.1- 

"gulp": "^3.9.1",
Samyak Jain
fuente
6
No hagas esto si estás en Node v10.
bbsimonbb
1
@bbsimonbb, ¿podrías dar más detalles sobre eso, por favor?
Henri
2
@Henri Versión 4 cambió la forma en que se ejecutan las tareas, por lo que para que su código actual funcione, necesita ejecutar gulp 3.9.1. Pero la mejor respuesta es actualizar su código para que sea compatible con gulp 4+
user441058
14

No necesita degradar su trago de trago 4 . Utilice gulp.series () para combinar varias tareas. Primero instale gulp globalmente con

npm install --global gulp-cli

y luego instale localmente en su directorio de trabajo con

npm install --save-dev gulp

ver detalles aquí

Ejemplo:

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

Ejecutar gulp startpara disparar múltiples tareas y ejecutar gulp jso gulp gulpSasspara una tarea específica.

Motahar Hossain
fuente
1
Esto estaba lo suficientemente cerca. Tuve que consultar el sitio web de Gulp para obtener la sintaxis correcta y agregar exportaciones.
Luke Puplett
10

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

Porque gulp.task(name, deps, func)fue reemplazado por gulp.task(name, gulp.{series|parallel}(deps, func)).

Estás usando la última versión de gulp pero un código más antiguo . Modifique el código o baje de categoría.

Ashim Sth
fuente
6

Recibo el mismo error cuando uso Gulp. La solución es cambiar a la versión 3.9.1 de Gulp, tanto para la versión local como para la versión CLI.

sudo npm install -g gulp@3.9.1

Ejecutar en la carpeta del proyecto

npm install gulp@3.9.1
Jopie
fuente
3

No es bueno seguir cambiando las versiones de gulp y npm para corregir los errores. Recibí varias excepciones los últimos días después de reinstalar mi máquina en funcionamiento. Y desperdició toneladas de minutos para reinstalar y arreglar esos.

Entonces, decidí actualizar todo a las últimas versiones: 

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

Este error se debe a la forma en que se ha codificado en su archivo gulp, pero no a la falta de coincidencia de la versión. Entonces, aquí tiene que cambiar 2 cosas en el archivo gulp para alinearlo con la versión 4 de Gulp. Gulp 4 ha cambiado la forma de iniciar la tarea que la versión 3.

  1. En la versión 4, debe definir la tarea como una función, antes de llamarla como tarea gulp por su nombre de cadena. En V3:

gulp.task ('servir', ['sass'], función () {..});

Pero en V4 debería ser así:

function serve() {
...
}
gulp.task('serve', gulp.series(sass));
  1. Como ha mencionado @Arthur, debe cambiar la forma de pasar argumentos a la función de tarea. Fue así en V3:

gulp.task ('servir', ['descaro'], función () {...});

Pero en V4, debería ser: 

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

El problema es que está usando gulp 4 y la sintaxis en gulfile.js es de gulp 3. Así que baje su gulp a 3.xx o utilice las sintaxis de gulp 4.

Syntax Gulp 3:

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

Syntax Gulp 4:

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

Puede leer más sobre las tareas de tragar y tragar en: https://medium.com/@sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81

Anushil Kumar
fuente
-4

Pasos:

  1. "tragar": "^ 3.9.1",
  2. npm install
  3. estilos de trago
Dann
fuente