这是我第一次在stackoverflow中请与我礼貌。
我在终端上使用MacOS Sierra 10.13.6,我正在尝试为AngularJS上构建的webapp演示自定义模板。我已经安装了Gulp但是当我启动gulp serve
时返回此错误而不启动本地服务器:
assert.js:337
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js:9:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
这是实际在~/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js
中的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上使用它,但这是我的gulpfile:
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));
我受到了这个example的启发。希望能帮助到你。