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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

Q&A

解決済

1回答

4811閲覧

gulpfile.jsでgulp-plumber部分にエラーメッセージ

cotton88

総合スコア87

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

0グッド

1クリップ

投稿2016/07/22 20:28

gulpfile.jsでgulp-plumber部分にエラーメッセージが出るので、stackoverflow.com等で事例を見てみたんですが解決策がわからず・・・・。
※一応、動いています。

teminal

1[05:18:04] Starting 'js'... 2[BS] Reloading Browsers... 3[05:18:04] 'js' errored after 1.64 ms 4[05:18:04] Error in plugin 'plumber' 5Message: 6 Can't pipe to undefined

javascript

1var gulp = require('gulp'); 2var browserSync = require('browser-sync').create(); 3var reload = browserSync.reload; 4var plumber = require('gulp-plumber'); 5var rename = require('gulp-rename'); 6var sourcemaps = require('gulp-sourcemaps'); 7var sass = require('gulp-sass'); 8var csslint = require('gulp-csslint'); 9var autoPrefixer = require('gulp-autoprefixer'); 10//if node version is lower than v.0.1.2 11require('es6-promise').polyfill(); 12var cssComb = require('gulp-csscomb'); 13var cmq = require('gulp-merge-media-queries'); 14var frontnote = require('gulp-frontnote'); 15var cleanCss = require('gulp-clean-css'); 16var uglify = require('gulp-uglify'); 17var imageMin = require('gulp-imagemin'); 18var cache = require('gulp-cache'); 19var notify = require('gulp-notify'); 20gulp.task('sass',function(){ 21 gulp.src(['src/asset/css/**/*.scss']) 22 .pipe(plumber({ 23 handleError: function (err) { 24 console.log(err); 25 this.emit('end'); 26 } 27 })) 28 .pipe(frontnote({ 29 out: 'docs/css' 30 })) 31 .pipe(sourcemaps.init()) 32 .pipe(sass()) 33 .pipe(autoPrefixer()) 34 .pipe(cssComb()) 35 .pipe(cmq({log:true})) 36 .pipe(csslint()) 37 .pipe(csslint.reporter()) 38 .pipe(gulp.dest('dist/asset/css')) 39 .pipe(rename({ 40 suffix: '.min' 41 })) 42 .pipe(cleanCss()) 43 .pipe(sourcemaps.write()) 44 .pipe(gulp.dest('dist/asset/css')) 45 .pipe(reload({stream:true})) 46 .pipe(notify('css task finished')); 47}); 48gulp.task('js',function(){ 49 gulp.src(['src/asset/js/**/*.js']) 50 .pipe(plumber({ 51 handleError: function (err) { 52 console.log(err); 53 this.emit('end'); 54 } 55 })) 56 .pipe(gulp.dest('dist/asset/js')) 57 .pipe(rename({ 58 suffix: '.min' 59 })) 60 .pipe(uglify()) 61 .pipe(gulp.dest('dist/asset/js')) 62 .pipe(reload()) 63 .pipe(notify('js task finished')); 64}); 65gulp.task('html',function(){ 66 gulp.src(['src//**/*.html']) 67 .pipe(plumber({ 68 handleError: function (err) { 69 console.log(err); 70 this.emit('end'); 71 } 72 })) 73 .pipe(gulp.dest('dist/')) 74 .pipe(reload()) 75 .pipe(notify('html task finished')); 76}); 77gulp.task('image',function(){ 78 gulp.src(['src/asset/images/**/*']) 79 .pipe(plumber({ 80 handleError: function (err) { 81 console.log(err); 82 this.emit('end'); 83 } 84 })) 85 .pipe(cache(imageMin())) 86 .pipe(gulp.dest('dist/asset/images')) 87 .pipe(reload()) 88 .pipe(notify('image task finished')); 89}); 90gulp.task('default',function(){ 91 browserSync.init({ 92 server: "dist/" 93 }); 94 gulp.watch('src/asset/js/**/*.js',['js']); 95 gulp.watch('src/asset/css/**/*.sass',['scss']); 96 gulp.watch('src//**/*.html',['html']); 97 gulp.watch('src/asset/images/**/*',['image']); 98}); 99

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

browserSync.reloadの使い方が間違っているようです。

JavaScript

1 .pipe(reload())

という行を全てコメントアウトして、

JavaScript

1gulp.task('default',function(){ 2 browserSync.init({ 3 server: "dist/" 4 }); 5 gulp.watch('src/asset/js/**/*.js',['js']); 6 gulp.watch('src/asset/css/**/*.sass',['scss']); 7 gulp.watch('src//**/*.html',['html']); 8 gulp.watch('src/asset/images/**/*',['image']); 9});

の部分を、

JavaScript

1gulp.task('default',function(){ 2 browserSync.init({ 3 server: "dist/" 4 }); 5 // .on('change', reload)を追加 6 gulp.watch('src/asset/js/**/*.js',['js']).on('change', reload); 7 gulp.watch('src/asset/css/**/*.sass',['scss']).on('change', reload); 8 gulp.watch('src//**/*.html',['html']).on('change', reload); 9 gulp.watch('src/asset/images/**/*',['image']).on('change', reload); 10});

のようにしたらエラーなく動きませんでしょうか?

browser-syncの対応するドキュメントはこちらにあります。
https://www.browsersync.io/docs/gulp

投稿2016/07/23 02:42

編集2016/07/23 02:43
MakeNowJust

総合スコア545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問