Gulp 4 gives an error

Question

Mistake:

assert.js:42 throw new errors.AssertionError({ ^ AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (E:\Web\test\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (E:\Web\test\node_modules\undertaker\lib\task.js:13:8) at Object.<anonymous> (E:\Web\test\gulpfile.js:224:6) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18)

Gulp version:

 PS E:\Web\test> gulp -v [06:20:13] CLI version 2.0.1 [06:20:13] Local version 4.0.0

Npm version:

 PS E:\Web\test> npm -v 6.5.0

package.json

 { "name": "html-ready", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Devinora", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.0", "@babel/preset-env": "^7.2.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "browser-sync": "^2.26.3", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-babel": "^8.0.0", "gulp-file-include": "^2.0.1", "gulp-imagemin": "^5.0.3", "gulp-minify-css": "^1.2.4", "gulp-plumber": "^1.2.1", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.4", "gulp-terser": "^1.1.6", "gulp-watch": "^5.0.1", "gulp.spritesmith": "^6.9.0", "imagemin-pngquant": "^6.0.0", "rimraf": "^2.6.2" }, "dependencies": { "npm": "^6.5.0" } }

gulpfile.js

 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), plumber = require('gulp-plumber'), prefixer = require('gulp-autoprefixer'), babel = require('gulp-babel'), terser = require('gulp-terser'), //альтернатива gulp-uglifyes sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), fileinclude = require('gulp-file-include'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), rimraf = require('rimraf'), browserSync = require("browser-sync"), rename = require('gulp-rename'), spritesmith = require('gulp.spritesmith'), reload = browserSync.stream; var path = { dist: { html: 'dist/', php: 'dist/', js: 'dist/js/', css: 'dist/css/', img: 'dist/img/', fonts: 'dist/fonts/' }, app: { html: 'app/*.html', php: 'app/*.php', js: 'app/js/main.js', jsInit: 'app/js/init.js', style: 'app/scss/main.scss', sprite: 'app/img/sprite/**/*.*', img: 'app/img/*.*', fonts: 'app/fonts/**/*.*', }, watch: { html: 'app/**/*.html', php: 'app/*.php', js: 'app/js/**/*.js', style: 'app/scss/**/*.scss', img: 'app/img/*.*', sprite: 'app/img/sprite/**/*.*', fonts: 'app/fonts/**/*.*' }, export: { img: 'app/img/', style: 'app/scss/imports/' }, spriteTemplate: 'sass.template.mustache', clean: './dist' }; var config = { server: { baseDir: "dist" // or ./dist }, // tunnel: true, // host: "178.150.110.97", // notify: false, logPrefix: "Frontend_Devil" }; gulp.task('webserver', function() { browserSync(config); }); gulp.task('clean', function(cb) { rimraf(path.clean, cb); }); gulp.task('html:dist', function() { gulp.src(path.app.html) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.html)) .pipe(reload()); }); gulp.task('php:dist', function() { gulp.src(path.app.php) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.php)) .pipe(reload()); }); gulp.task('js:dist', function() { //init.js //Файл для инициации // gulp.src(path.app.jsInit) // .pipe(plumber()) // .pipe(sourcemaps.init()) // .pipe(fileinclude({ // prefix: '@@', // basepath: '@file' // })) // .pipe(babel({ // presets: ["@babel/preset-env"] // })) // .pipe(terser()) // .pipe(sourcemaps.write()) // .pipe(rename({suffix: '.babel-min', prefix : ''})) // .pipe(gulp.dest(path.dist.js)) //Обычный js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Babel-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(rename({ suffix: '.babel', prefix: '' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(terser()) //альтернатива uglifyes .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.min', prefix: '' })) .pipe(gulp.dest(path.dist.js)); //Babel-mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(terser()) .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.babel-min', prefix: '' })) .pipe(gulp.dest(path.dist.js)) .pipe(reload()); }); gulp.task('style:dist', function() { gulp.src(path.app.style) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ sourceMap: true, errLogToConsole: true })) .pipe(prefixer()) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.css)) .pipe(cssmin()) .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.min', prefix: '' })) .pipe(gulp.dest(path.dist.css)) .pipe(reload()); }); gulp.task('image:dist', function() { gulp.src(path.app.img) .pipe(plumber()) .pipe(imagemin({ progressive: true, svgoPlugins: [{ removeViewBox: false }], use: [pngquant()], interlaced: true })) .pipe(gulp.dest(path.dist.img)) .pipe(reload()); }); gulp.task('sprite:dist', function() { var spriteData = gulp.src(path.app.sprite) .pipe(plumber()) .pipe(spritesmith({ imgName: 'sprite.png', cssName: '_sprite.scss', cssFormat: 'scss', algorithm: 'binary-tree', cssTemplate: path.spriteTemplate, cssVarMap: function(sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest(path.export.img)); spriteData.css.pipe(gulp.dest(path.export.style)); }); gulp.task('fonts:dist', function() { gulp.src(path.app.fonts) .pipe(plumber()) .pipe(gulp.dest(path.dist.fonts)) }); gulp.task('dist', [ 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' ]); gulp.task('watch', function() { watch(path.watch.html, function(event, cb) { gulp.start('html:dist'); }); watch(path.watch.php, function(event, cb) { gulp.start('php:dist'); }); watch(path.watch.style, function(event, cb) { gulp.start('style:dist'); }); watch(path.watch.js, function(event, cb) { gulp.start('js:dist'); }); watch(path.watch.img, function(event, cb) { gulp.start('image:dist'); }); watch(path.watch.sprite, function(event, cb) { gulp.start('sprite:dist'); }); watch(path.watch.fonts, function(event, cb) { gulp.start('fonts:dist'); }); }); gulp.task('default', ['dist', 'webserver', 'watch']);

Partial solution

The problem was that when switching to the new Gulp 4 , they did not do backward compatibility. I do not know why, and whether this is justified, but below I will give an example that helped me.

They added two new methods: gulp.series , gulp.parallel .

It was:

 gulp.task('dist', [ 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' ]); gulp.task('watch', function() { watch(path.watch.html, function(event, cb) { gulp.start('html:dist'); }); watch(path.watch.php, function(event, cb) { gulp.start('php:dist'); }); watch(path.watch.style, function(event, cb) { gulp.start('style:dist'); }); watch(path.watch.js, function(event, cb) { gulp.start('js:dist'); }); watch(path.watch.img, function(event, cb) { gulp.start('image:dist'); }); watch(path.watch.sprite, function(event, cb) { gulp.start('sprite:dist'); }); watch(path.watch.fonts, function(event, cb) { gulp.start('fonts:dist'); }); }); gulp.task('default', ['dist', 'webserver', 'watch']);

It became:

 //Удалил // gulp.task('dist', [ // 'html:dist', // 'php:dist', // 'js:dist', // 'sprite:dist', // 'style:dist', // 'fonts:dist', // 'image:dist' // ]); gulp.task('watch', function() { gulp.watch(path.watch.html, function(event, cb) { gulp.start('html:dist'); }); gulp.watch(path.watch.php, function(event, cb) { gulp.start('php:dist'); }); gulp.watch(path.watch.style, function(event, cb) { gulp.start('style:dist'); }); gulp.watch(path.watch.js, function(event, cb) { gulp.start('js:dist'); }); gulp.watch(path.watch.img, function(event, cb) { gulp.start('image:dist'); }); gulp.watch(path.watch.sprite, function(event, cb) { gulp.start('sprite:dist'); }); gulp.watch(path.watch.fonts, function(event, cb) { gulp.start('fonts:dist'); }); }); gulp.task('default', gulp.parallel( 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist', 'webserver', 'watch' ));

PS: At the expense of the spelling of gulp.task('watch') I doubt it, but this decision helped me.

PSS: This is a small part of the problems. I would be grateful if you edit gulpfile.js as needed. If you need source, let me know.

 [07:12:09] Starting '<anonymous>'... [07:12:09] '<anonymous>' errored after 2.72 ms [07:12:09] TypeError: gulp.start is not a function at E:\Web\test\gulpfile.js:227:8 at bound (domain.js:301:14) at runBound (domain.js:314:12) at asyncRunner (E:\Web\test\node_modules\async-done\index.js:55:18) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickDomainCallback (internal/process/next_tick.js:218:9)

@Qwertiy, at first this solved my problem, but other errors got out.
By this, I added the source code, and wrote what I could decide myself.
Update Gulp to version 4, see the video about the transition from gulp 3 to gulp 4, there is a lot of information, I am sure that it will help you

Answer 1 · 2018-12-17T09:36:38

In Gulp 4, the way of defining tasks was changed, if the task depends on the performance of another task, in other words, the list parameter [] to indicate the tasks to be executed is outdated.

You have described the drawing as follows (note the gulp.start , it will need to be replaced, since the launch should be done differently):

 gulp.task('watch', function() { watch(path.watch.js, function(event, cb) { gulp.start('js:dist'); }); watch(path.watch.html, function(event, cb) { gulp.start('html:dist'); }); // some code here... });

Here you need to redo it like this (instead of start use series ):

 gulp.task('watch', function() { gulp.watch(path.watch.js, gulp.series('js:dist')); gulp.watch(path.watch.html, gulp.series('html:dist')); // some code here... });

This is an example of launching yesterday on JS and HTML (the rest are similar). The only remark - make sure that the paths to the files in the templates are correct (for example, 'app/**/*.html' ).

Also redo the launch of the following task (replace the list parameter [] ):

 gulp.task('dist', [ 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' ]);

For example, the following code:

 gulp.task('dist', gulp.parallel( 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' ));

Next, launching the 'default' task, it looks like this for you (as I wrote earlier - the parameter for specifying the task list in [] is outdated):

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

Make the launch of the 'default' task like this (so that they work in parallel through gulp.parallel , also remove the launch via the [] list parameter):

 gulp.task('default', gulp.parallel('dist', 'webserver', 'watch'));

In Gulp 4, it is customary to use the following functions of gulp.series(...tasks) and gulp.parallel(...tasks) instead of the list parameter [] .

By functions used:

gulp.parallel(...tasks) - runs the specified tasks in parallel, and if an error occurs, the execution will be completed
gulp.series(...tasks) - runs tasks sequentially in the specified order, and if an error occurs, execution will be completed

Link to the documentation for running tasks inside gulp.series :

Running tasks in series

Link to a similar problem and its solution:

Everytime I run gulp anything, I get a assertion error. - Task function must be specified

And also a link to the guide on the transition to Gulp 4:

A quick guide for switching to gulp 4

Also, I want to draw attention to the fact that all the packages that you use in your gulpfile need to be updated, make sure that they support Gulp 4. I told you about the main nuances, other problems should not arise when switching to Gulp 4, like The rule of thumb is the list parameter [] and sometimes too old packages.

An example of your application. To begin with, the versions that are installed on my computer (versions node , npm , gulp ):

After that I launched gulp and the page opened in the browser:

I made edits to the html file and saved the changes, while the wizard worked and the change was displayed in the console, I also tried to change the js file and in the console these changes were also displayed:

The browser displayed changes almost instantly:

Here is the actual gulpfile that I launched:

 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), plumber = require('gulp-plumber'), prefixer = require('gulp-autoprefixer'), babel = require('gulp-babel'), terser = require('gulp-terser'), //альтернатива gulp-uglifyes sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), fileinclude = require('gulp-file-include'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), rimraf = require('rimraf'), browserSync = require("browser-sync"), rename = require('gulp-rename'), spritesmith = require('gulp.spritesmith'), reload = browserSync.stream; var path = { dist: { html: 'dist/', php: 'dist/', js: 'dist/js/', css: 'dist/css/', img: 'dist/img/', fonts: 'dist/fonts/' }, app: { html: 'app/*.html', php: 'app/*.php', js: 'app/js/main.js', jsInit: 'app/js/init.js', style: 'app/scss/main.scss', sprite: 'app/img/sprite/**/*.*', img: 'app/img/*.*', fonts: 'app/fonts/**/*.*', }, watch: { html: 'app/**/*.html', php: 'app/*.php', js: 'app/js/**/*.js', style: 'app/scss/**/*.scss', img: 'app/img/*.*', sprite: 'app/img/sprite/**/*.*', fonts: 'app/fonts/**/*.*' }, export: { img: 'app/img/', style: 'app/scss/imports/' }, spriteTemplate: 'sass.template.mustache', clean: './dist' }; var config = { server: { baseDir: "dist" // or ./dist }, // tunnel: true, // host: "178.150.110.97", // notify: false, logPrefix: "Frontend_Devil" }; gulp.task('webserver', function() { browserSync(config); }); gulp.task('clean', function(cb) { rimraf(path.clean, cb); }); gulp.task('html:dist', function(done) { gulp.src(path.app.html) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.html)) .pipe(reload()); done(); }); gulp.task('php:dist', function(done) { gulp.src(path.app.php) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.php)) .pipe(reload()); done(); }); gulp.task('js:dist', function(done) { //init.js //Файл для инициации // gulp.src(path.app.jsInit) // .pipe(plumber()) // .pipe(sourcemaps.init()) // .pipe(fileinclude({ // prefix: '@@', // basepath: '@file' // })) // .pipe(babel({ // presets: ["@babel/preset-env"] // })) // .pipe(terser()) // .pipe(sourcemaps.write()) // .pipe(rename({suffix: '.babel-min', prefix : ''})) // .pipe(gulp.dest(path.dist.js)) //Обычный js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Babel-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(rename({suffix: '.babel', prefix : ''})) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(terser()) //альтернатива uglifyes .pipe(sourcemaps.write()) .pipe(rename({suffix: '.min', prefix : ''})) .pipe(gulp.dest(path.dist.js)); //Babel-mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(terser()) .pipe(sourcemaps.write()) .pipe(rename({suffix: '.babel-min', prefix : ''})) .pipe(gulp.dest(path.dist.js)) .pipe(reload()); done(); }); gulp.task('style:dist', function(done) { gulp.src(path.app.style) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ sourceMap: true, errLogToConsole: true })) .pipe(prefixer()) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.css)) .pipe(cssmin()) .pipe(sourcemaps.write()) .pipe(rename({suffix: '.min', prefix : ''})) .pipe(gulp.dest(path.dist.css)) .pipe(reload()); done(); }); gulp.task('image:dist', function(done) { gulp.src(path.app.img) .pipe(plumber()) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()], interlaced: true })) .pipe(gulp.dest(path.dist.img)) .pipe(reload()); done(); }); gulp.task('sprite:dist', function(done) { var spriteData = gulp.src(path.app.sprite) .pipe(plumber()) .pipe(spritesmith({ imgName: 'sprite.png', cssName: '_sprite.scss', cssFormat: 'scss', algorithm: 'binary-tree', cssTemplate: path.spriteTemplate, cssVarMap: function(sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest(path.export.img)); spriteData.css.pipe(gulp.dest(path.export.style)); done(); }); gulp.task('fonts:dist', function(done) { gulp.src(path.app.fonts) .pipe(plumber()) .pipe(gulp.dest(path.dist.fonts)) done(); }); gulp.task('dist', gulp.parallel( 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' )); gulp.task('watch', function() { gulp.watch(path.watch.html, gulp.series('html:dist')); gulp.watch(path.watch.php, gulp.series('php:dist')); gulp.watch(path.watch.style, gulp.series('style:dist')); gulp.watch(path.watch.js, gulp.series('js:dist')); gulp.watch(path.watch.sprite, gulp.series('sprite:dist')); gulp.watch(path.watch.fonts, gulp.series('fonts:dist')); }); gulp.task('default', gulp.parallel('dist', 'webserver', 'watch'));

Since some tasks may contain asynchronous code, you must signal gulp when your task completes.

In Gulp 3 versions you could not do this. If you did not explicitly specify asynchronous termination, gulp would simply assume that your task is synchronous and that it is completed as soon as your task is completed.

Gulp 4 introduced a stricter regime in this regard. You must explicitly signal the completion of the task. This can be done in five different ways, which are described in detail in the following answer: Gulp error:

The easiest way is to call a callback function, which Gulp automatically passes to your task as the first argument. You just need to call this function at the end of the task (made an edit to the answer, the done function callback was added in the parameters).

Start my project and you will see for yourself what is not working.
@ AcneBlack, everything works for me, I attached screenshots of the application, a screenshot with the versions, screenshots of the gulp launch, and also attached the gulpfile itself - I just changed the watch task section because you had a path to path.watch.js
I looked at your sources, and saw that you are using gulp.parallel in watch .

Max Manchak Max Manchak 703 one ten · Answer 2 · 2018-12-26T12:21:13

When switching from gulp 3 to gulp 4, there are basically 2 problems, the first seems to be obvious at first trying to find a solution to the problem: instead of an array with task names, use the gulp.parallel method or gulp.series - the only difference between them is that method. parallel runs tasks in parallel with each other, but the .series method does not start execution of the second task specified in it before the first one ends ... in total, you can use the .parallel method everywhere if there is no strict dependence in the sequence of tasks transferred to this method.

It was:

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

It became:

 `gulp.task('default', gulp.parallel('dist', 'webserver', 'watch'));`

The second problem is not so obvious, because it all depends on how you set up gulpfile before.

the fact is that the task in gulp is a stream, and if you don’t "tell" the gulp that the stream is complete, an error can come out.

To inform gulp that the called task has ended there are 2 ways:

1) pass a parameter to the function parameters (let's call it callback) and, after performing all the actions, call this parameter;

2) use return for actions in the task.

For example

It was:

 `gulp.task('html:dist', function() { gulp.src(path.app.html) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.html)) .pipe(reload()); });`

close the task thread using return:

 `gulp.task('html:dist', function() { return gulp.src(path.app.html) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.html)) .pipe(reload()); });`

The previous method is good, BUT we can observe in this project the task js: dist, where we cannot use return, because in this case the task will be interrupted after the first task is completed (since return returns the result of the execution and the function does not continue):

 `gulp.task('js:dist', function() { gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Babel-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(rename({ suffix: '.babel', prefix: '' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //..... и далее другие задачи таска });`

And in this case, the best solution is to transfer the callback function to the parameters and call it after all the necessary actions:

 `gulp.task('js:dist', function(callback) { gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Babel-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(rename({ suffix: '.babel', prefix: '' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //..... и далее другие задачи таска callback(); });`

The main thing that helped))) but when I ran into it myself, I lost a few hours to understand why the mistakes were knocked out))

Answer 3 · 2018-12-15T05:06:37

Answer Denis Bubnov is up to date, but I want to provide my final version.

Special thanks to Max Manchak , as he provided the working code in the comments, and helped to bring ( to perfection ) the final answer.

 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), plumber = require('gulp-plumber'), prefixer = require('gulp-autoprefixer'), babel = require('gulp-babel'), terser = require('gulp-terser'), //альтернатива gulp-uglifyes sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), fileinclude = require('gulp-file-include'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), rimraf = require('rimraf'), browserSync = require("browser-sync"), rename = require('gulp-rename'), spritesmith = require('gulp.spritesmith'), reload = browserSync.stream; var path = { dist: { html: 'dist/', php: 'dist/', js: 'dist/js/', css: 'dist/css/', img: 'dist/img/', fonts: 'dist/fonts/', videos: 'dist/videos/', files: 'dist/files/' }, app: { html: 'app/*.html', php: 'app/*.php', js: 'app/js/main.js', jsInit: 'app/js/init.js', style: 'app/scss/main.scss', img: 'app/img/*.*', sprite: 'app/img/sprite/**/*.*', fonts: 'app/fonts/**/*.*', videos: 'app/videos/*.*', files: 'app/files/*.*' }, watch: { html: 'app/**/*.html', php: 'app/*.php', js: 'app/js/**/*.js', style: 'app/scss/**/*.scss', img: 'app/img/*.*', sprite: 'app/img/sprite/**/*.*', fonts: 'app/fonts/**/*.*', videos: 'app/videos/*.*', files: 'app/files/*.*' }, export: { img: 'app/img/', style: 'app/scss/imports/' }, spriteTemplate: 'sass.template.mustache', clean: './dist' }; var config = { server: { baseDir: "dist" // or ./dist }, // tunnel: true, // host: "178.150.110.97", // notify: false, logPrefix: "Frontend_Devil" }; gulp.task('webserver', function(cb) { browserSync(config); cb(); }); gulp.task('clean', function(cb) { rimraf(path.clean, cb); }); gulp.task('html:dist', function(cb) { gulp.src(path.app.html) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.html)) .pipe(reload()); cb(); }); gulp.task('php:dist', function(cb) { gulp.src(path.app.php) .pipe(plumber()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest(path.dist.php)) .pipe(reload()); cb(); }); gulp.task('js:dist', function(cb) { //init.js //Файл для инициации // gulp.src(path.app.jsInit) // .pipe(plumber()) // .pipe(sourcemaps.init()) // .pipe(fileinclude({ // prefix: '@@', // basepath: '@file' // })) // .pipe(babel({ // presets: ["@babel/preset-env"] // })) // .pipe(terser()) // .pipe(sourcemaps.write()) // .pipe(rename({suffix: '.babel-min', prefix : ''})) // .pipe(gulp.dest(path.dist.js)) //Обычный js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)); gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(rename({ suffix: '.babel', prefix: '' })) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.js)) //Mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(terser()) //альтернатива uglifyes .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.min', prefix: '' })) .pipe(gulp.dest(path.dist.js)); //Babel-mini-js файл. gulp.src(path.app.js) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(babel({ presets: ["@babel/preset-env"] })) .pipe(terser()) .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.babel-min', prefix: '' })) .pipe(gulp.dest(path.dist.js)) .pipe(reload()); cb(); }); gulp.task('style:dist', function(cb) { gulp.src(path.app.style) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ sourceMap: true, errLogToConsole: true })) .pipe(prefixer()) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.dist.css)) .pipe(cssmin()) .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.min', prefix: '' })) .pipe(gulp.dest(path.dist.css)) .pipe(reload()); cb(); }); gulp.task('image:dist', function(cb) { gulp.src(path.app.img) .pipe(plumber()) .pipe(imagemin({ progressive: true, svgoPlugins: [{ removeViewBox: false }], use: [pngquant()], interlaced: true })) .pipe(gulp.dest(path.dist.img)) .pipe(reload()); cb(); }); gulp.task('sprite:dist', function(cb) { var spriteData = gulp.src(path.app.sprite) .pipe(plumber()) .pipe(spritesmith({ imgName: 'sprite.png', cssName: '_sprite.scss', cssFormat: 'scss', algorithm: 'binary-tree', cssTemplate: path.spriteTemplate, cssVarMap: function (sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest(path.export.img)); spriteData.css.pipe(gulp.dest(path.export.style)); reload(); cb(); }); gulp.task('fonts:dist', function(cb) { gulp.src(path.app.fonts) .pipe(plumber()) .pipe(gulp.dest(path.dist.fonts)) .pipe(reload()); cb(); }); gulp.task('videos:dist', function(cb) { gulp.src(path.app.videos) .pipe(plumber()) .pipe(gulp.dest(path.dist.videos)) .pipe(reload()); cb(); }); gulp.task('files:dist', function(cb) { gulp.src(path.app.files) .pipe(plumber()) .pipe(gulp.dest(path.dist.files)) .pipe(reload()); cb(); }); gulp.task('dist', gulp.parallel( 'html:dist', 'php:dist', 'js:dist', 'style:dist', 'image:dist', 'sprite:dist', 'fonts:dist', 'videos:dist', 'files:dist' )); gulp.task('watch', function() { gulp.watch(path.watch.html, gulp.series('html:dist')); gulp.watch(path.watch.php, gulp.series('php:dist')); gulp.watch(path.watch.js, gulp.series('js:dist')); gulp.watch(path.watch.style, gulp.series('style:dist')); gulp.watch(path.watch.img, gulp.series('image:dist')); gulp.watch(path.watch.sprite, gulp.series('sprite:dist')); gulp.watch(path.watch.fonts, gulp.series('fonts:dist')); gulp.watch(path.watch.videos, gulp.series('videos:dist')); gulp.watch(path.watch.files, gulp.series('files:dist')); }); gulp.task('default', gulp.parallel('dist', 'webserver', 'watch'));

Gulp 4 gives an error

3 answers 3

More articles: