【问题标题】:Task never defined: Moving from gulpV3 to gulpV4从未定义的任务:从 gulpV3 迁移到 gulpV4
【发布时间】:2019-08-11 22:06:15
【问题描述】:

我不得不将一个旧项目从 gulp 版本 3.9.1 升级到 gulp 版本 4,这需要我重写我的任务。我已经按照文档迁移到 gulp.series 并迁移到命名函数,但我现在仍然在运行时遇到错误。下面是我用来查看两种不同语言样式的代码。

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

function 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();
        }
    )
};

function watch_AllDesktop(done){
    gulp.series(desktop_styles, desktop_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
        done();
    });

function watch_desk_desktop_styles_rtl(done){
    gulp.series(desktop_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
        done();
    });

function watch_desktop_en(done){
    gulp.series(desktop_styles, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
    });

function watch_mobile_rtl(done){
    gulp.series(mobile_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
        done();
    });

function watch_mobile_en(done){
    gulp.series(mobile_styles, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
        done();
    });

function watch_AllMobile(done){
    gulp.series(mobile_styles, mobile_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
        done();
    });

当我运行“gulp watch_all”时,我得到任务从未定义。函数或我的代码顺序有问题吗?

【问题讨论】:

    标签: javascript npm sass gulp gulp-4


    【解决方案1】:
    1. watch_AllDesktopwatch_AllMobile 的所有函数都需要一个右括号}

    2. 您的主要问题是,您没有导出任务


    实习任务不需要导出,但是你所有的任务,应该可以在每个控制台上运行,都必须有一个导出。

    例如在 gulpfile.js 的末尾添加如下导出:

    exports.watch_all = watch_all;
    


    导出后,您可以通过gulp --tasks 证明哪些任务可供您使用


    编辑(评论问题)

    您的手表应该没有回调,因为手表应该永久运行,而不仅仅是一次。

    function watch_all(){
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles, mobile_styles_rtl, desktop_styles, desktop_styles_rtl ));
    }
    

    如有其他问题,请使用小示例和受影响的代码打开新问题。谢谢

    【讨论】:

    • 感谢您的回复!这确实解决了我的语法错误,但是当我运行任务时我仍然有错误。我首先得到的是“你忘记发出异步完成信号了吗?”我通过在我的函数中添加另一个回调来修复该错误。但是,当我运行任务时,它会完成并结束。它不会持续监视我的 sass 文件的任何更改,而且当我对任何 sass 文件进行更改时,css 不会重新生成...不确定监视任务发生了什么:/ 这是我更新的代码:@ 987654321@
    • 效果很好 :) 谢谢你的修复并告诉我如何压缩它;我被困在这个问题上很长一段时间了!
    猜你喜欢
    • 2021-09-10
    • 2021-08-28
    • 2017-10-29
    • 1970-01-01
    • 1970-01-01
    • 2020-12-18
    • 2011-09-04
    • 2021-03-23
    • 1970-01-01
    相关资源
    最近更新 更多