Ошибка при преобразовании скриптов gulp из V3 в V4 - PullRequest
Новая
       53

Ошибка при преобразовании скриптов gulp из V3 в V4

2 голосов
/ 20 марта 2019

Я обновляюсь до gulp4 с 3.9.1 на старом проекте.Из-за обновления мне пришлось переписать задачи в соответствии с документацией.Я переключился на функции имен и использую gulp.series, но получаю такие ошибки, как:

AssertionError [ERR_ASSERTION]: Задача не определена: mobile_styles

Ниже приведен мой файл gulp.Он состоит в основном из сценариев просмотра на двух языках для настольных компьютеров и мобильных устройств 

var fontName = "project-icons",
    gulp = require("gulp"),
    sass = require("gulp-sass"),
    sourcemaps = require("gulp-sourcemaps"),
    iconfont = require("gulp-iconfont"),
    iconfontCss = require("gulp-iconfont-css");

var sassOptions = {
    errLogToConsole: true,
    outputStyle: "expanded"
};

function iconfont(done) {
    gulp.src(["./icons/*.svg"])
        .pipe(
            iconfontCss({
                fontName: fontName,
                path: "sass",
                targetPath: "../sass/static/icons/_icons.sass",
                fontPath: "./fonts/",
                cssClass: "icon"
            })
        )
        .pipe(
            iconfont({
                formats: ["ttf", "eot", "woff", "woff2", "svg"],
                fontName: fontName,
                normalize: true,
                fixedWidth: true,
                centerHorizontally: true
            })
        )
        .on("glyphs", function(glyphs, options) {})
        .pipe(gulp.dest("./fonts/"));
    done();
}

function desktop_styles() {
    return gulp
        .src("./sass/_en/style.sass")
        .pipe(
            sourcemaps.init({
                loadMaps: true,
                identityMap: true,
                sourceRoot: "../css/"
            })
        )
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./css/"));
}

function desktop_styles_rtl() {
    return gulp
        .src("./sass/_ar/style.sass")
        .pipe(
            sourcemaps.init({
                loadMaps: true,
                identityMap: true,
                sourceRoot: "../css/"
            })
        )
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./css/lang/rtl"));
}

function mobile_styles() {
    return gulp
        .src("./sass/en/mobile/style.sass")
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(gulp.dest("./css/m"));
}

function mobile_styles_rtl() {
    return gulp
        .src("./sass/rtl/m/style.sass")
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(gulp.dest("./css/lang/rtl/m"));
}

gulp.task(
    "watch:all",
    gulp.series(
        "mobile_styles",
        "mobile_styles_rtl",
        "desktop_styles",
        "desktop_styles_rtl",
        function() {
            gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
            gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
            gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
            gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
        }
    )
);

gulp.task(
    "watch:AllDesktop",
    gulp.series("desktop_styles", "desktop_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
        gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
    })
);

gulp.task(
    "watch:desktop_styles_rtl",
    gulp.series("desktop_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
    })
);

gulp.task(
    "watch:desktop_en",
    gulp.series("desktop_styles", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
    })
);

gulp.task(
    "watch:mobile_rtl",
    gulp.series("mobile_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
    })
);

gulp.task(
    "watch:mobile_en",
    gulp.series("mobile_styles", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
    })
);

gulp.task(
    "watch:AllMobile",
    gulp.series("mobile_styles", "mobile_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
        gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
    })
);

Может ли кто-нибудь помочь мне в устранении неполадок?Должен ли я переключиться на gulp.parallels для выполнения задач или я неправильно рефакторинг?

1 Ответ

2 голосов
/ 20 марта 2019

Все ваши часы должны иметь форму: 

gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles)

Так, например, измените на: 

gulp.task(
    "watch:all",
    gulp.series(
        mobile_styles,
        mobile_styles_rtl,
        desktop_styles,
        desktop_styles_rtl,
        function(done) {
            gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
            gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
            gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
            gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
            done();
        }
    )
);

Обратите внимание, что при обращении к именованным функциям они не заключеныв кавычках (как задача, созданная с помощью gulp.task).И я добавил done, чтобы сигнализировать о завершении этой задачи, что будет важно.

Вы должны изменить большую часть своего кода в этой форме.И ваши gulp.task вызовы также могут быть преобразованы в именованные функции.Таким образом, начало приведенного выше кода может быть следующим: 

   function watch_all() {
        gulp.series(….

[хотя нельзя использовать : в имени функции.]

...