[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
2021-12-29 11:42:28
質問
私はgulpプロジェクトを持っています。
package.json
と
gulpfile.js
を以下のように設定します。
パッケージ.json
{
"name": "bulkit-startup",
"version": "0.0.1",
"description": "Bulkit Startup Kit",
"main": "Gruntfile.js",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.24.5",
"gulp": "^4.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-postcss": "^6.1.0",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"jquery": "^3.3.1",
"mq4-hover-shim": "^0.3.0",
"panini": "^1.3.0",
"rimraf": "^2.5.2"
},
"engines": {
"node": ">=0.10.1"
},
"scripts": {
"start": "gulp",
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "https://github.com/cssninjaStudio/bulkit.git"
},
"bugs": {
"url": "https://github.com/cssninjaStudio/bulkit/issues",
"email": "[email protected]"
},
"author": "Css Ninja <[email protected]> (https://cssninja.io/themes/bulkit)",
"license": "Commercial",
"private": true,
"dependencies": {
"bulma": "^0.7.0",
"del": "^3.0.0",
"jquery-waypoints": "^2.0.5",
"jquery.counterup": "^2.1.0",
"scrollreveal": "^3.4.0",
"slick-carousel": "^1.8.1",
"wallop": "^2.4.1"
}
}
gulpfile.js
var gulp = require('gulp');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mq4HoverShim = require('mq4-hover-shim');
var rimraf = require('rimraf').sync;
var browser = require('browser-sync');
var panini = require('panini');
var concat = require('gulp-concat');
var port = process.env.SERVER_PORT || 8080;
var nodepath = 'node_modules/';
var assetspath = 'assets/';
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
// Watch files for changes
gulp.task('watch', function() {
gulp.watch('scss/**/*', ['compile-scss', browser.reload]);
gulp.watch('sass/**/*', ['compile-sass', browser.reload]);
gulp.watch('js/**/*', ['copy-js', browser.reload]);
gulp.watch('images/**/*', ['copy-images', browser.reload]);
gulp.watch('html/pages/**/*', ['compile-html']);
gulp.watch(['html/{layouts,includes,helpers,data}/**/*'], ['compile-html:reset','compile-html']);
gulp.watch(['./src/{layouts,partials,helpers,data}/**/*'], [panini.refresh]);
});
// Erases the dist folder
gulp.task('reset', function() {
rimraf('bulma/*');
rimraf('scss/*');
rimraf('assets/css/*');
rimraf('assets/fonts/*');
rimraf('images/*');
});
// Erases the dist folder
gulp.task('clean', function() {
rimraf('_site');
});
// Copy Bulma filed into Bulma development folder
gulp.task('setupBulma', function() {
//Get Bulma from node modules
gulp.src([nodepath + 'bulma/*.sass']).pipe(gulp.dest('bulma/'));
gulp.src([nodepath + 'bulma/**/*.sass']).pipe(gulp.dest('bulma/'));
});
// Copy static assets
gulp.task('copy', function() {
//Copy other external font and data assets
gulp.src(['assets/fonts/**/*']).pipe(gulp.dest('_site/assets/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/fonts/**/*']).pipe(gulp.dest('_site/assets/css/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/ajax-loader.gif']).pipe(gulp.dest('_site/assets/css/'));
});
//Theme Sass variables
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: [nodepath + 'bulma/sass']
};
//Theme Scss variables
var scssOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: ['./scss/partials']
};
// Compile Bulma Sass
gulp.task('compile-sass', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./bulma/bulma.sass')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Theme Scss
gulp.task('compile-scss', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./scss/core.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Html
gulp.task('compile-html', function() {
gulp.src('html/pages/**/*.html')
.pipe(panini({
root: 'html/pages/',
layouts: 'html/layouts/',
partials: 'html/includes/',
helpers: 'html/helpers/',
data: 'html/data/'
}))
.pipe(gulp.dest('_site'))
.on('finish', browser.reload);
});
gulp.task('compile-html:reset', function(done) {
panini.refresh();
done();
});
// Compile css from node modules
gulp.task('compile-css', function() {
return gulp.src([
nodepath + 'slick-carousel/slick/slick.css',
nodepath + 'slick-carousel/slick/slick-theme.css',
nodepath + 'wallop/css/wallop.css',
//Additional static css assets
assetspath + 'css/icons.min.css',
])
.pipe(concat('app.css'))
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile js from node modules
gulp.task('compile-js', function() {
return gulp.src([
nodepath + 'jquery/dist/jquery.min.js',
nodepath + 'slick-carousel/slick/slick.min.js',
nodepath + 'scrollreveal/dist/scrollreveal.min.js',
nodepath + 'waypoints/lib/jquery.waypoints.min.js',
nodepath + 'waypoints/lib/shortcuts/sticky.min.js',
nodepath + 'jquery.counterup/jquery.counterup.min.js',
nodepath + 'wallop/js/Wallop.min.js',
//Additional static js assets
assetspath + 'js/ggpopover/ggpopover.min.js',
assetspath + 'js/ggpopover/ggtooltip.js',
assetspath + 'js/embed/embed.js',
assetspath + 'js/gmap/gmap.min.js',
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy Theme js to production site
gulp.task('copy-js', function() {
gulp.src('js/**/*.js')
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy images to production site
gulp.task('copy-images', function() {
gulp.src('images/**/*')
.pipe(gulp.dest('./_site/assets/images/'));
});
gulp.task('init', ['setupBulma']);
gulp.task('build', ['clean','copy', 'compile-js', 'compile-css', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-images']);
gulp.task('default', ['server', 'watch']);
以下のコマンドを実行すると
$ gulp build
エラーが出ます。
assert.js:269
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (bulkit/startup-kit/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (startup-kit/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous>
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
nodeのバージョンはv10.5.0、npmのバージョンは以下のようにインストールします。
6.1.0
. システムは
MacOS High Sierra
10.13.2
解決方法は?
Gulp 4.0では、タスクが他のタスクの実行に依存する場合、タスクを定義する方法が変更されました。listパラメータは非推奨となりました。
gulpfile.jsの例では、次のようになります。
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
リスト・パラメーターの代わりに
gulp.series()
と
gulp.parallel()
.
このタスクは、次のようなものに変更する必要があります。
// Starts a BrowerSync instance
gulp.task('server', gulp.series('build', function(){
browser.init({server: './_site', port: port});
}));
私は専門家ではありません。より堅牢な例として タスクを直列に実行するためのgulpドキュメント または、Jhey ThompkinsとStefan Baumgartnerによる以下の素晴らしいブログポスト
関連
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
JavaScriptの配列共通メソッド解説
-
[解決済み] テスト
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
JavaScriptのStringに関する共通メソッド
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vueにシンプルなメモ帳機能を実装
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] テスト
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] Node.jsを完全にアンインストールして、最初から再インストールする方法 (Mac OS X)