#javascript #nodejs #gulp #npm
Исходники: Gulp4.zip
Ошибка:
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. (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:
PS E:\Web\test> gulp -v
[06:20:13] CLI version 2.0.1
[06:20:13] Local version 4.0.0
Версия Npm:
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']);
Частичное решение
Проблема была в том, что при переходе на новый Gulp 4, не сделали обратной совместимости.
Не знаю почему, и оправдано ли это, но ниже я приведу пример, который мне помог.
Они добавили два новых метода: gulp.series, gulp.parallel.
Было:
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']);
Стало:
//Удалил
// 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'
));
P.S: На счет правильности написания gulp.task('watch') я сомневаюсь, но такое решение
мне помогло.
P.S.S: Это малая часть проблем. Буду благодарен, если отредактируете gulpfile.js
так как нужно. Если нужны будет исходники, дайте знать.
[07:12:09] Starting ''...
[07:12:09] '' 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)
Ответы
Ответ 1
В Gulp 4 изменили способ определения задач, если задача зависит от выполнения другой задачи, другими словами параметр списка [] для указания задач на выполнение - устарел. У вас описан вотчер следующим образом (обратите внимание на gulp.start, его нужно будет заменить, так как запуск должен производиться иначе): 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... }); Вотчер нужно переделать так (вместо start используй 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... }); Это примера запуска вотчера на JS и HTML (остальные по подобию). Единсвенное замечание - следите за правильностью указания пути к файлам в шаблонах (к примеру 'app/**/*.html'). Также переделайте запуск следующей таски (замените параметра списка []): gulp.task('dist', [ 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' ]); К примеру на следующий код: gulp.task('dist', gulp.parallel( 'html:dist', 'php:dist', 'js:dist', 'sprite:dist', 'style:dist', 'fonts:dist', 'image:dist' )); Далее, запуск 'default' задачи, у вас он выглядит так (как писал ранее - параметр указания списка задач через [] - устарел): gulp.task('default', ['dist', 'webserver', 'watch']); Сделайте запуск 'default' задачи вот так (чтобы они работали параллельно через gulp.parallel, также убрали запуск через параметр списка []): gulp.task('default', gulp.parallel('dist', 'webserver', 'watch')); В Gulp 4 принято использовать вместо параметра списка [] следующие функции gulp.series(...tasks) и gulp.parallel(...tasks). По использованным функциям: gulp.parallel(...tasks) — запускает указанные задачи параллельно, при этом, если возникает ошибка, то выполнение будет завершено gulp.series(...tasks) — запускает задачи последовательно в указанном порядке, при этом, если возникает ошибка, то выполнение будет завершено Ссылка на документацию по запуску задач внутри gulp.series: Running tasks in series Сссылка на похожую проблему и ее решение: Everytime I run gulp anything, I get a assertion error. - Task function must be specified А также ссылка на гайд по переходу на Gulp 4: A quick guide for switching to gulp 4 Также, хочу обратить внимание на то, что все пакеты, которые вы используете в своем gulpfile необходимо обновить, обязательно удостоверьтесь в том, что они поддерживают Gulp 4. Про основные нюансы я рассказал, других проблем не должно возникнуть при переходе на Gulp 4, как правило основной проблемой является параметра списка [], и иногда слишком старые пакеты. Пример работы вашего приложения. Для начала, версии, которые установлены на моем компьютере (версии node, npm, gulp): После этого я запустил gulp и в браузере открылась страница: Я внес правки в html файл и сохранил изменения, при этом вотчер сработал и отобразилось в консоли изменение, также попробовал изменить js файл и в консоли эти изменения тоже отобразились: В браузере отобразились изменения практически моментально: Вот, собственно сам gulpfile который я запустил: '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')); Поскольку некоторые задачи могут содержать асинхронный код, вы должны сигнализировать gulp, когда ваша задача завершит выполнение. В Gulp 3 версий вы могли не делать этого. Если вы не указали явно асинхронное завершение, gulp просто предположил бы, что ваша задача является синхронной и что она завершена, как только ваша задача завершится. В Gulp 4 был внедрен более строгий режим в этом отношении. Вы должны явно сигнализировать о завершении задачи. Это можно сделать пятью разными способами, о которых подробно описано в следующем ответе: Gulp error: The following tasks did not complete: Did you forget to signal async completion? Самый простой способ - это вызвать функцию обратного вызова, которую Gulp автоматически передает вашей задаче в качестве первого аргумента. Нужно просто вызвать эту функцию в конце задачи (внес правку в ответ, в параметрах добавлена колбэк функция done).Ответ 2
Ответ Denis Bubnov актуальный, но я хочу предоставить свой конечный вариант. Отдельное спасибо Max Manchak, так как он в комментариях предоставил работающий код, и помог довести (до совершенства) конечный ответ. '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'));Ответ 3
При переходе с gulp 3 на gulp 4 есть в принципе 2 проблемы, первая вроде как очевидная при первых попытка поиска решения проблемы: вместо массива с названиями тасков использовать метод gulp.parallel или gulp.series - между ними разница лишь в том, что метод .parallel запускает таски параллельно друг с другом, а вот метод .series не начинает выполнение второго таска указанного в нем до того как закончится первый... итого можно использовать метод .parallel везде если нет строгой зависимости в чередности выполнения тасков переданных данному методу. было: gulp.task('default', ['dist', 'webserver', 'watch']); стало: `gulp.task('default', gulp.parallel('dist', 'webserver', 'watch'));` Вторая же проблема не такая очевидная, т.к. всё зависит от того как ранее настраивали gulpfile. дело в том что таски в gulp представляют из себя поток, и если не "сказать" gulp, что поток завершен, то может вылезть ошибка. Чтобы сообщить gulp что вызванный таск завершился есть 2 способа: 1) передать в параметры функции некий параметр (назовём его callback) и после выполнения всех действий вызвать этот параметр; 2) воспользоваться return для действий в таске. на примере было: `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()); });` закроем поток таска использовав 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()); });` предыдущий способ хорош, НО мы можем наблюдать в данном проекте таск js:dist, где мы не можем использовать return так как в таком случае прервется выполнение таска после выполнения первой задачи (т.к. return возвращает результат выполнения и дальше функция не выполняется): `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)) //..... и далее другие задачи таска });` И вот в этом случае лучшим решением будет передать в параметры функции callback и вызвать его после всех необходимых нам действий: `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(); });`
Комментариев нет:
Отправить комментарий