programing

Gulp AssertionError [ERR_ASSERTION]: 작업 함수를 지정해야 합니다.

mbctv 2023. 3. 12. 11:10
반응형

Gulp AssertionError [ERR_ASSERTION]: 작업 함수를 지정해야 합니다.

Angular 기반의 웹 앱 데모용 템플릿을 커스터마이즈하려고 합니다.MacOS Sierra 10.13.6을 사용하는 JS. Gulp을 설치했지만 실행 시gulp serve로컬 서버를 시작하지 않고 다음 오류를 반환합니다.

assert.http:337 스로우 에러;^

AssertionError [ERR_ASSERTION]: 작업 함수는 Gulp에서 지정해야 합니다.gulp.task(/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/set-task.js:10:3)에서 [set Task](/Users/barkia/Desktop/Elium/E/reposium/re-material/re-material)를 설정합니다.(/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js:9:6)을 참조하십시오.오브젝트의 _compile(internal/modules/cjs/loader.js:689:30).Module._확장..js(내부/내부/외부/외부).js:700:10)을 tryModuleLoad(internal/modules/cjs/loader.js:599:32)로 설정합니다.Module.require(internal/modules/cjs/loader.js:530:3)에 있는 Module._load(internal/modules/cjs/loader.js:637:17) (internal/modules/cjs/helpers:20:18)

여기 gulfile.js의 실제 위치가 있습니다.~/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js

이전 에러는 삭제했습니다./usr/local/share/man/man1/gulp.1기동함으로써npm uninstall -g gulp그 후npm install -g gulp하지만 난 아직도 그 문제를 안고 있다.assert.js:337

var gulp = require('gulp');
var args = require('yargs').argv;
var browserSync = require('browser-sync');
var config = require('./gulp.config')();
var del = require('del');
var $ = require('gulp-load-plugins')({lazy: true});

gulp.task('help', $.taskListing);
gulp.task('default', ['help']);

gulp.task('vet', function() {
    log('Analyzing source with JSHint and JSCS');

    return gulp
        .src(config.alljs)
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
        .pipe($.jshint.reporter('fail'));
});

gulp.task('clean-tmp', function(done) {
    var files = config.tmp;
    clean(files, done);
});

gulp.task('clean', function(done) {
    var delconfig = [].concat(config.dist, config.tmp);
    log('Cleaning ' + $.util.colors.blue(delconfig));
    del(delconfig, done);
});

gulp.task('clean-all', function(done) {
    var delconfig = config.allToClean;
    log('Cleaning ' + $.util.colors.blue(delconfig));
    clean(delconfig, done);
});

gulp.task('pug-docs', function() {
    log('Compiling docs pug --> html');

    var options = {
        pretty: false
    }

    return gulp
        .src(config.docsPug)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.pug(options))
        .pipe(gulp.dest(config.docs));
});

gulp.task('less', function() {
    log('Compiling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.less())
        .pipe($.autoprefixer())
        .pipe(gulp.dest(config.tmp));
});

gulp.task('less-watcher', function() {
    gulp.watch([config.less], ['less']);
});

gulp.task('sass', function() {
    log('Compiling Sass --> CSS');

    var sassOptions = {
        outputStyle: 'nested' // nested, expanded, compact, compressed
    };

    return gulp
        .src(config.sass)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.sourcemaps.init())
        .pipe($.sass(sassOptions))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(config.tmp + '/styles'));
});

gulp.task('sass-min', function() {
    log('Compiling Sass --> minified CSS');

    var sassOptions = {
        outputStyle: 'compressed' // nested, expanded, compact, compressed
    };

    return gulp
        .src(config.sass)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.sass(sassOptions))
        .pipe($.autoprefixer())
        .pipe(gulp.dest(config.tmp + '/styles'));    
})

gulp.task('sass-watcher', function() {
    gulp.watch([config.sass], ['sass']);
});

gulp.task('inject', function() {
    log('Injecting custom scripts to index.html');

    return gulp
        .src(config.index)
        .pipe( $.inject(gulp.src(config.js), {relative: true}) )
        .pipe(gulp.dest(config.client));
});

gulp.task('copy', ['sass-min'], function() {
    log('Copying assets');

    var assets = [].concat(config.assetsLazyLoad, config.assetsToCopy);

    gulp.src(config.tmp + '/styles/loader.css').pipe(gulp.dest(config.dist + '/styles'));

    return gulp
        .src(assets, {base: config.client})
        .pipe(gulp.dest(config.dist + '/'));
});

gulp.task('optimize', ['inject', 'sass-min'], function() {
    log('Optimizing the js, css, html');

    return gulp
        .src(config.index)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.useref())
        .pipe($.if('scripts/app.js', $.uglify()))
        .pipe(gulp.dest( config.dist ));

});


gulp.task('serve', ['inject', 'sass'], function() {
    startBrowserSync('serve');
});

gulp.task('build', ['optimize', 'copy'], function() {
    startBrowserSync('dist');
})

gulp.task('serve-dist', function() {
    gulp.run('build');
})

gulp.task('serve-docs', ['pug-docs'], function() {
    startBrowserSync('docs');
})



function clean(path, done) {
    log('Cleaning: ' + $.util.colors.blue(path));
    del(path, done);
}

function log(msg) {
    if (typeof(msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                $.util.log($.util.colors.green(msg[item]));
            }
        }
    } else {
        $.util.log($.util.colors.green(msg));
    }
}

function swallowError (error) {
    // If you want details of the error in the console
    console.log(error.toString());

    this.emit('end');
}

function startBrowserSync(opt) {
    if (args.nosync || browserSync.active) {
        return;
    }

    var options = {
        port: 3000,
        ghostMode: {
            clicks: false,
            location: false,
            forms: false,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0, //1000,
        online: false
    };

    switch(opt) {
        case 'dist':
            log('Serving dist app');
            serveDistApp();
            break;
        case 'docs':
            log('Serving docs');
            serveDocs();
            break;
        default:
            log('Serving app');
            serveApp();
            break;
    }

    function serveApp() {
        gulp.watch([config.sass], ['sass']);

        options.server = {
            baseDir: [
                config.client,
                config.tmp
            ]
        };
        options.files = [
            config.client + '/**/*.*',
            '!' + config.sass,
            config.tmp + '/**/*.css'
        ];

        browserSync(options);
    }

    function serveDistApp() {
        options.server = {
            baseDir: [
                config.dist
            ]
        };
        options.files = [];

        browserSync(options);
    }

    function serveDocs() {
        gulp.watch([config.docsPug], ['pug-docs']);

        options.server = {
            baseDir: [
                config.docs
            ]
        }

        options.files = [
            config.docs + '/index.html',
            '!' + config.pug
        ];

        browserSync(options);
    }

}

gulp 4로 업그레이드 할 때 같은 문제가 발생했습니다.

종속 작업을 직렬 또는 병렬로 지정해야 합니다. 이름만으로는 더 이상 충분하지 않습니다.

gulp.task('copy', ['sass-min'], function() {

된다

gulp.task('copy', gulp.series('sass-min'), function() {

gulp.parallel작업을 병렬로 실행하기 위해서도 사용할 수 있습니다.

나는 Gulp에 대해 정확히 문제가 있었고, 너는 그런 작업을 없애야 한다는 것을 알게 되었다.

작업을 단순한 함수로 정의한 후 함수를 사용하여 작업을 정의해야 합니다.gulp.series()또는gulp.parallel().

Angular에서는 사용하지 않지만, 여기 제 gulp 파일이 있습니다.

const bsync = require('browser-sync');
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const sass = require('gulp-sass');

function sync(done) {
    bsync.init({
        files: [
            '*.html',
            'assets/css/**/*.css',
            'assets/js/**/*.js'
        ],
        host: '0.0.0.0',
        server: './',
        port: 8080,
        reloadDelay: 1000,
        ghostMode: false,
        notify: false
    });
    done();
}

function styles() {
    return gulp.src('./assets/scss/**/*.scss')
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
        .pipe(autoprefixer({ remove: false }))
        .pipe(gulp.dest('./assets/css'))
        .pipe(bsync.stream());
}

function watchFiles() {
    gulp.watch('./assets/scss/**/*.scss', styles);
}

gulp.task('start', gulp.series(sync, styles, watchFiles));

는 이 사례에서 영감을 얻었다.도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/52301415/gulp-assertionerror-err-assertion-task-function-must-be-specified

반응형