質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

解決済

gulpコンパイルエラー

mizuiro28
mizuiro28

総合スコア0

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1回答

0評価

0クリップ

339閲覧

投稿2021/11/23 16:18

前提・実現したいこと

gulpでコンパイルの設定をしているのですが、
ターミナルで「npx gulp」と打つと下記のエラーが発生しました。
原因のわかる方がいらっしゃいましたらご教示いただきたいです。

発生している問題・エラーメッセージ

Error: watching src/js/**/*.js: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) at Gulp.watch (/Users/mizu/mock/node_modules/gulp/index.js:31:11) at /Users/mizu/mock/gulpfile.js:89:10 at taskWrapper (/Users/mizu/mock/node_modules/undertaker/lib/set-task.js:13:15) at bound (node:domain:421:15) at runBound (node:domain:432:12) at asyncRunner (/Users/mizu/mock/node_modules/async-done/index.js:55:18) at processTicksAndRejections (node:internal/process/task_queues:78:11)

該当のソースコード(gulpfile.js)

var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); var sourcemaps = require('gulp-sourcemaps'); var sass = require('gulp-sass'); var csslint = require('gulp-csslint'); var autoPrefixer = require('gulp-autoprefixer'); //if node version is lower than v.0.1.2 require('es6-promise').polyfill(); var cssComb = require('gulp-csscomb'); var cmq = require('gulp-merge-media-queries'); var cleanCss = require('gulp-clean-css'); var uglify = require('gulp-uglify'); var ejs = require('gulp-ejs'); var imageMin = require('gulp-imagemin'); var cache = require('gulp-cache'); gulp.task('sass',function(){ gulp.src(['src/scss/**/*.sass']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(sourcemaps.init()) .pipe(sass({ includePaths: require('node-neat').includePaths })) .pipe(autoPrefixer()) .pipe(cssComb()) .pipe(cmq({log:true})) .pipe(csslint()) .pipe(csslint.formatter()) .pipe(gulp.dest('dist/css')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCss()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist/css')) .pipe(reload({stream:true})) }); gulp.task('js',function(){ gulp.src(['src/js/**/*.js']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(gulp.dest('dist/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(reload()) }); gulp.task('ejs',function(){ gulp.src(['src/ejs/**/*.ejs']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(ejs()) .pipe(gulp.dest('src')) .pipe(reload()) }); gulp.task('image',function(){ gulp.src(['src/images/**/*']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(cache(imageMin())) .pipe(gulp.dest('dist/images')) .pipe(reload()) }); gulp.task('default',function(){ browserSync.init({ server: "./" }); gulp.watch('src/js/**/*.js',['js']); gulp.watch('src/scss/**/*.sass',['sass']); gulp.watch('src/ejs/**/*.ejs',['ejs']); gulp.watch('src/images/**/*',['image']); });

該当ファイル(paackage.json)

{ "name": "rikokatsu_mock", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "high5inc@high5inc.git.backlog.com:/RIKOKATU/rikokatsu_mock.git" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "gulp": "^4.0.2", "gulp-plumber": "^1.2.1", "gulp-rename": "^2.0.0", "gulp-sourcemaps": "^3.0.0", "gulp-sass": "^5.0.0", "node-neat": "^2.0.0-beta.0", "gulp-autoprefixer": "^8.0.0", "es6-promise": "^4.2.8", "gulp-csscomb": "^3.1.0", "gulp-merge-media-queries": "^0.2.1", "gulp-csslint": "^1.0.1", "gulp-clean-css": "^4.3.0", "gulp-uglify": "^3.0.2", "gulp-ejs": "^5.1.0", "gulp-imagemin": "^7.1.0", "gulp-cache": "^1.1.3", "browser-sync": "^2.27.7" } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。