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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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回答

351閲覧

gulpfile.js notifyの通知が止まってくれない

fuhixx

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

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

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2020/06/29 08:41

なぜかHTMLの方だけ通知が止まらなくなります。
該当部分は以下のコメントアウト部分です↓

gulpfileJS

1//HTML 2task('html', function () { 3 return ( 4 src(paths.html) 5 // .pipe( 6 // plumber({ 7 // errorHandler: notify.onError({ 8 // title: "html Error!", 9 // message: "<%= error.message %>", 10 // sound: 'Glass',}) 11 // }) 12 // ) 13 .pipe(htmlbeautify(options)) 14 .pipe(dest(paths.root)) 15 // .pipe( 16 // notify({ 17 // title: 'Task running Gulp', 18 // message: 'html file compiled.', 19 // sound: 'Tink',}) 20 // ) 21 ); 22});

以下は全体のgulpfile.jsです。

gulpfileJS

1const gulp = require('gulp'); 2const notify = require("gulp-notify"); 3const plumber = require("gulp-plumber"); 4const sass = require('gulp-sass'); 5// glob追加 6const glob = require("gulp-sass-glob"); 7// glob追加終了 8// beautify 追加 9const htmlbeautify = require("gulp-html-beautify"); 10const cssbeautify = require('gulp-cssbeautify'); 11// beautify 追加終了 12const pug = require('gulp-pug'); 13const autoprefixer = require('gulp-autoprefixer'); 14const uglify = require('gulp-uglify'); 15const browserSync = require('browser-sync'); 16 17//setting : paths 18const paths = { 19 'root' : './dist/', 20 'pug' : './src/pug/**/*.pug', 21 'html' : './dist/**/*.html', 22 'cssSrc' : './src/scss/**/*.scss', 23 'cssDist' : './dist/css/', 24 'jsSrc' : './src/js/**/*.js', 25 'jsDist': './dist/js/' 26} 27 28// setting : htmlbeautify 29const options = { 30 indent_char: '', 31 indent_size: 1, 32 unformatted: ['textarea', 'p', 'pre', 'span', 'a', 'h1', 'h2', 'h3'], 33 indent_with_tabs: true, 34 max_preserve_newlines: 0, 35 wrap_attributes: false, 36 wrap_attributes_indent_size: 0, 37} 38 39//gulpコマンドの省略 40const { watch, series, task, src, dest, parallel } = require('gulp'); 41 42//HTML 43task('html', function () { 44 return ( 45 src(paths.html) 46 // .pipe( 47 // plumber({ 48 // errorHandler: notify.onError({ 49 // title: "html Error!", 50 // message: "<%= error.message %>", 51 // sound: 'Glass',}) 52 // }) 53 // ) 54 .pipe(htmlbeautify(options)) 55 .pipe(dest(paths.root)) 56 // .pipe( 57 // notify({ 58 // title: 'Task running Gulp', 59 // message: 'html file compiled.', 60 // sound: 'Tink',}) 61 // ) 62 ); 63}); 64 65//Sass 66task('sass', function () { 67 return ( 68 src(paths.cssSrc) 69 .pipe( 70 plumber({ 71 errorHandler: notify.onError({ 72 title: "sass Error!", 73 message: "<%= error.message %>", 74 sound: 'Glass',}) 75 }) 76 ) 77 // glob追加 78 .pipe(glob()) 79 // 追加終了 80 .pipe(sass({ 81 // Minifyするなら'compressed' 82 outputStyle: 'expanded' 83 })) 84 .pipe(autoprefixer()) 85 .pipe(dest(paths.cssDist)) 86 // notifyでコンパイル成功通知 87 .pipe( 88 notify({ 89 title: 'Task running Gulp', 90 message: 'sass file compiled.', 91 sound: 'Tink',}) 92 ) 93 // notifyでコンパイル成功通知 終了 94 ); 95}); 96 97//JS Compress 98task('js', function () { 99 return ( 100 src(paths.jsSrc) 101 .pipe(plumber()) 102 .pipe(uglify()) 103 .pipe(dest(paths.jsDist)) 104 ); 105}); 106 107// browser-sync 108task('browser-sync', () => { 109 return browserSync.init({ 110 server: { 111 baseDir: paths.root 112 }, 113 port: 8080, 114 reloadOnRestart: true 115 }); 116}); 117 118// browser-sync reload 119task('reload', (done) => { 120 browserSync.reload(); 121 done(); 122}); 123 124//watch 125task('watch', (done) => { 126 watch([paths.html], series('html', 'reload')); 127 watch([paths.cssSrc], series('sass', 'reload')); 128 watch([paths.jsSrc], series('js', 'reload')); 129 done(); 130}); 131task('default', parallel('watch', 'browser-sync'));

試したこと
・プラグインのインストールし直し
・該当部分のタスクを「(done) => 」の形式で書き直す
・googleで検索する(見つからない)

どうかよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

Macがなぜか「おやすみモードに移行していた」ために起きた現象でした。。
ありがとうございました。

投稿2020/07/24 00:52

fuhixx

総合スコア22

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問