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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

gulp

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

Q&A

3回答

2286閲覧

【gulp導入】プラグイン機能しない(sassコンパイル)

benkyosuruo

総合スコア16

JSON

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2020/02/13 00:19

編集2022/01/12 10:55

node.js、gulpインストール済み
下記プラグイン等が使用できない状態です。
・glup-sass

以前に欲しいプラグイン全てを一括でインストールし、試しましたがうまくいかなかったので、まずgulp-sassをインストールしましたがエラーメッセージ
```gulp-sass: command not found```
が出てしまいました。
node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・

mac version: 10.15.3 Catalina

gulp
CLI version: 2.2.0
Local version: 4.0.2

node.js:v12.15.0

試した事
・JSONLintを使用したバリデーションチェック
・package-lock.jasonをアンインストールとpackage-jasonの再インストール
・グローバルの削除とローカルのインストール
・npm cache clean -forceでキャッシュの消去
・jasonのコンマの確認
・デフォルトシェルをbashからzshへ変更(今はbashへ戻しました)

理解不足で見当違いなことをしているとは思いますが、調べて出てきたことを試しました。

gulpfile.js

var gulp = require('gulp'); var sass = require('gulp-sass'); //Sassコンパイル gulp.task('sass', function() { return gulp .src('./src/scss/**/*.scss') .pipe( plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }) ) //エラーチェック .pipe(sassGlob()) //importの読み込みを簡潔にする .pipe( sass({ outputStyle: 'expanded' //expanded, nested, campact, compressedから選択 }) ) .pipe( postcss([ autoprefixer({ // ☆IEは11以上、Androidは4.4以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する overrideBrowserslist: ['last 2 versions', 'ie >= 11', 'Android >= 4'], cascade: false }) ]) ) .pipe(postcss([cssdeclsort({ order: 'alphabetically' })])) //プロパティをソートし直す(アルファベット順) .pipe(gulp.dest('./src/css')); //コンパイル後の出力先 });

package.json

{ "name": "gulptest", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.7.4", "browser-sync": "^2.26.7", "css-declaration-sorter": "^5.1.1", "gulp": "^4.0.2", "gulp-ejs": "^5.0.0", "gulp-imagemin": "^7.1.0", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-rename": "^2.0.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.1.0", "imagemin-mozjpeg": "^8.0.0", "imagemin-pngquant": "^8.0.0" }, "dependencies": {}, "description": "" } ```![イメージ説明](a1cc9918fca534046a572c5c2d3689f9.png) ![イメージ説明](bea4f3226830a59d7b2b36b89c9e6d2a.png) 簡単な見落としや理解不足でしたらすみません。 お力添えをお願いします。

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

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

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

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

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

nanami12

2020/02/13 01:48

質問者さんと、同じ環境をお持ちの方は少ないかとおもわれます。 すくなくとも、プログラミングの質問ではないので プラグインのreadmeを熟読するか同一名のプラグインで 同様の問題がないかさぐるしかないかと思います。
benkyosuruo

2020/02/13 02:08

どこに問題がありどう解決していいかも切り分けができていない状態で・・失礼いたしました。 無知な質問でしたが、ご回答ありがとうございます。 引き続き調べてみようと思います。
nanami12

2020/02/13 02:20

プラグイン名を正確に記載することで、 回答を得られるかもしれないので プラグイン名を正確に記載したほうがよろしいかと思います。 すくなからず、プラグイン名はアルファベットで表記されていると思います。
benkyosuruo

2020/02/13 02:27

アドバイスの通り、プラグイン名を追記してみました。 ご丁寧にありがとうございます。
guest

回答3

0

あなたのgulpfile.jsを省略してsass処理だけにしてみましたが、gulp-sassは問題なく動きますね。

var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp .src('./src/scss/**/*.scss') .pipe(sass({ outputStyle: 'expanded' }) ) .pipe(gulp.dest('./src/css')); });

実行

$ npm run gulp sass > gulptest@0.0.0 gulp /usr/local/var/www/gulptest > gulp "sass" [00:44:13] Using gulpfile /usr/local/var/www/gulptest/gulpfile.js [00:44:13] Starting 'sass'... [00:44:13] Finished 'sass' after 24 ms

エラーメッセージ
```gulp-sass: command not found```
が出てしまいました。

変なエラーメッセージですね。
gulp-sassはgulpのモジュールなので
「モジュール 'gulp-sass' が見つかりません。」
みたいなエラーならわかりますが。

あなたの環境にはgulp-sassという実行コマンドがあるのですか?

投稿2020/02/14 00:59

technocore

総合スコア7200

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

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

0

benkyosuruoさんがはっていただいた画像を見て、package.jsonなどのファイルのある階層が気になりました。
package.jsonpackage.json-lockgulpfile.jssrcnode_modulesと同じ階層にあるのが正しいです。

nanamiさんが紹介していただいたサイトの画像を添付します。
ref: 絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA
イメージ説明]

ディレクトリ構成を確認してから、もう一度gulpのコンパイルを実行してみてください。

投稿2020/02/13 14:38

shgtkshruch

総合スコア665

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

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

benkyosuruo

2020/02/14 03:26

ご回答ありがとうございます。確認してみましたが、同じ階層にあるようでした。(追加写真)
shgtkshruch

2020/02/14 06:35

画像ありがとうございます。確かにディレクトリ構成は正しいと思います。 それでは、実際に gulp を実行しているコマンドとその結果を貼っていただいてもいいでしょうか? エラーメッセージもすべて貼っていただくともう少しコメントできると思います。
guest

0

時間が無くて、全てを調べることはできませんでしたが
glup-sassのプラグインの使い方は
下記にあります。動画での説明もあります
ここ

投稿2020/02/13 02:32

nanami12

総合スコア1015

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問