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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

解決済

1回答

2395閲覧

gulpの監視が作動しない

pr_777

総合スコア20

JSON

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

1グッド

0クリップ

投稿2020/03/14 03:10

編集2020/03/14 03:13

gulpを触ろうと思い、色々と調べてこちらのサイトを参考に手順を進めていました。
https://www.go-next.co.jp/blog/web/soft_tool/13407/#Gulp

コマンドからgulp cssminを実行してcssを圧縮することはできました。
今度はgulpコマンドでファイルを監視して、圧縮する作業を自動化したいのですが、この作業がこちらの手順通りにやってもうまくできません。

ディレクトリ構造はこちらになります。
gulp_dev/
├ dest/
├ node_modules/
├ src/
│ └ style.css/
│  
├ gulpfile.js
├ package-lock.json
└package.json

gulpfile.jsの中身がこちらです

js

1var gulp = require("gulp"); 2var cssmin = require("gulp-cssmin"); 3 4gulp.task("cssmin", function() { 5 gulp 6 .src("./src/style.css") 7 .pipe(cssmin()) 8 .pipe(gulp.dest("dest/cssmin")); 9}); 10 11gulp.task("default", function() { 12 gulp.watch("./src/style.css", gulp.task("cssmin")); 13}); 14 15コード

困っていること
[11:58:24] Using gulpfile ~\Desktop\gulp_dev\gulpfile.js
[11:58:24] Starting 'default'...

本来であれば
[14:56:08] Using gulpfile ...
[14:56:08] Starting 'watch'...
[14:56:08] Finished 'watch' after 9.15 ms

上のように'finished'まで表示されるはずだと思うのですが、
startingで止まったままで、既存のCSSファイルを編集して保存しても圧縮されておりません。

パスの間違いかなにかでしょうか?

s.k👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

引用テキスト上のように'finished'まで表示されるはずだと思うのですが、

回答ではなくアドバイスですが、監視タスクなのでfinishedは出ずに動き続けますので
Startingのままで正しいです。
監視中は、以下のようにログ出力されます。(監視タスクはCTRL+Cで終了します。)

~/Desktop/gulptest $ npm run gulp watchtest
[12:36:10] Using gulpfile ~/Desktop/gulptest/gulpfile.js
[12:36:10] Starting 'watchtest'...
[12:36:36] Starting 'compile_scss'...
[12:36:36] Finished 'compile_scss' after 22 ms
[12:36:40] Starting 'compile_scss'...
[12:36:40] Finished 'compile_scss' after 9.39 ms
^C
~/Desktop/gulptest $

(追加回答)
ちなみに質問のツリーを見ると、destの下にcssminが無いようです。
.pipe(gulp.dest("dest/cssmin"));

gulp_dev/
├ dest/
├ node_modules/

投稿2020/03/14 03:50

編集2020/03/14 04:43
technocore

総合スコア7225

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

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

pr_777

2020/03/15 07:40

ご回答有り難うございます。 ご教授いただいたとおり、ファイル構成を整えたところ正常に動きました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問