teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【gulp導入】プラグイン機能しない（sassコンパイル）

編集履歴

質問編集履歴

7

写真位置変更

2020/02/14 03:25

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](bea4f3226830a59d7b2b36b89c9e6d2a.png)node.js、gulpインストール済み
1
+ node.js、gulpインストール済み
2
2
  下記プラグイン等が使用できない状態です。
3
3
  ・glup-sass
4
4
 
@@ -94,6 +94,6 @@
94
94
 
95
95
 
96
96
  ```![イメージ説明](a1cc9918fca534046a572c5c2d3689f9.png)
97
-
97
+ ![イメージ説明](bea4f3226830a59d7b2b36b89c9e6d2a.png)
98
98
  簡単な見落としや理解不足でしたらすみません。
99
99
  お力添えをお願いします。

6

写真の追加

2020/02/14 03:24

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- node.js、gulpインストール済み
1
+ ![イメージ説明](bea4f3226830a59d7b2b36b89c9e6d2a.png)node.js、gulpインストール済み
2
2
  下記プラグイン等が使用できない状態です。
3
3
  ・glup-sass
4
4
 

5

試したことの追加

2020/02/14 03:24

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
@@ -1,1 +1,1 @@
1
- 【gulp導入】プラグイン機能しない（sassコンパイル・ブラウザリロード・ベンダープレフィックス）
1
+ 【gulp導入】プラグイン機能しない（sassコンパイル）
body CHANGED
@@ -1,16 +1,10 @@
1
1
  node.js、gulpインストール済み
2
2
  下記プラグイン等が使用できない状態です。
3
3
  ・glup-sass
4
- ・gulp-plumper
5
- ・gulp-notify
6
- ・gulp-sass-glob
7
- ・post-css
8
- ・autoprefixer
9
- ・browser-sync
10
- ・gulp-ejs
11
- ・gulp-imagemin
12
4
 
13
- プラグイン全て機能していないので、他の部分に問題があるのかと考えましたが、エラーメッセージなども見当たらないので問題の切り分けができず。
5
+ 以前に欲しいプラグイン全てを一括でインストールし、試しましたがうまくいかなかったので、まずgulp-sassをインストールしましたがエラーメッセージ
6
+ ｀｀｀gulp-sass: command not found｀｀｀
7
+ が出てしまいました。
14
8
  node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・
15
9
 
16
10
 
@@ -22,114 +16,55 @@
22
16
 
23
17
  node.js:v12.15.0
24
18
 
19
+ 試した事
20
+ ・JSONLintを使用したバリデーションチェック
21
+ ・package-lock.jasonをアンインストールとpackage-jasonの再インストール
22
+ ・グローバルの削除とローカルのインストール
23
+ ・npm cache clean -forceでキャッシュの消去
24
+ ・jasonのコンマの確認
25
+ ・デフォルトシェルをbashからzshへ変更（今はbashへ戻しました）
25
26
 
27
+ 理解不足で見当違いなことをしているとは思いますが、調べて出てきたことを試しました。
26
28
 
29
+
27
30
  gulpfile.js
28
31
  ```
32
+
33
+
29
34
  var gulp = require('gulp');
30
35
  var sass = require('gulp-sass'); //Sassコンパイル
31
- var plumber = require('gulp-plumber'); //エラー時の強制終了を防止
32
- var notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する
33
- var sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする
34
- var browserSync = require('browser-sync'); //ブラウザ反映
35
- var postcss = require('gulp-postcss'); //autoprefixerとセット
36
- var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
37
- var cssdeclsort = require('css-declaration-sorter'); //css並べ替え
38
- var imagemin = require('gulp-imagemin');
39
- var pngquant = require('imagemin-pngquant');
40
- var mozjpeg = require('imagemin-mozjpeg');
41
- var ejs = require("gulp-ejs");
42
- var rename = require("gulp-rename"); //.ejsの拡張子を変更
43
36
 
44
- // scssのコンパイル
45
- gulp.task('sass', function () {
37
+ gulp.task('sass', function() {
46
38
  return gulp
47
- .src('./src/scss/*.scss')//scssファイルのディレクトリを指定
39
+ .src('./src/scss/**/*.scss')
40
+ .pipe(
48
- .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))//エラーチェック
41
+ plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
42
+ ) //エラーチェック
49
- .pipe(sassGlob())//importの読み込みを簡潔にする
43
+ .pipe(sassGlob()) //importの読み込みを簡潔にする
50
- .pipe(sass({
44
+ .pipe(
45
+ sass({
51
- outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
46
+ outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
52
- }))
47
+ })
48
+ )
49
+ .pipe(
50
+ postcss([
53
- .pipe(postcss([autoprefixer(
51
+ autoprefixer({
54
- {
55
- // ☆IEは11以上、Androidは4.4以上
52
+ // ☆IEは11以上、Androidは4.4以上
56
- // その他は最新2バージョンで必要なベンダープレフィックスを付与する
53
+ // その他は最新2バージョンで必要なベンダープレフィックスを付与する
57
- "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
54
+ overrideBrowserslist: ['last 2 versions', 'ie >= 11', 'Android >= 4'],
58
- cascade: false
55
+ cascade: false
59
- }
56
+ })
60
- )]))
57
+ ])
58
+ )
61
- .pipe(postcss([cssdeclsort({ order: 'alphabetically' })]))//プロパティをソートし直す(アルファベット順)
59
+ .pipe(postcss([cssdeclsort({ order: 'alphabetically' })])) //プロパティをソートし直す(アルファベット順)
62
- .pipe(gulp.dest('./src/css'));//コンパイル後の出力先
60
+ .pipe(gulp.dest('./src/css')); //コンパイル後の出力先
63
61
  });
64
-
65
- // 保存時のリロード
66
- gulp.task('browser-sync', function (done) {
67
- browserSync.init({
68
-
69
- //ローカル開発
70
- server: {
71
- baseDir: "./",
72
- index: "index.html"
73
- }
74
- });
75
- done();
76
- });
77
-
78
- gulp.task('bs-reload', function (done) {
79
- browserSync.reload();
80
- done();
81
- });
82
-
83
- gulp.task("ejs", (done) => {
84
- gulp
85
- .src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"])
86
- .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))//エラーチェック
87
- .pipe(rename({ extname: ".html" })) //拡張子をhtmlに
88
- .pipe(gulp.dest("./")); //出力先
89
- done();
90
- });
91
-
92
- // 監視
93
- gulp.task('watch', function (done) {
94
- gulp.watch('./src/scss/**/*.scss', gulp.task('sass')); //sassが更新されたらgulp sassを実行
95
- gulp.watch('./src/scss/**/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行
96
- gulp.watch('./src/js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行
97
- gulp.watch('./ejs/**/*.ejs', gulp.task('ejs')); //ejsが更新されたらgulp-ejsを実行
98
- gulp.watch('./ejs/**/*.ejs', gulp.task('bs-reload')); //ejsが更新されたらbs-reloadを実行
99
- });
100
-
101
- // default
102
- gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));
103
-
104
- //圧縮率の定義
105
- var imageminOption = [
106
- pngquant({ quality: [70 - 85], }),
107
- mozjpeg({ quality: 85 }),
108
- imagemin.gifsicle({
109
- interlaced: false,
110
- optimizationLevel: 1,
111
- colors: 256
112
- }),
113
- imagemin.mozjpeg(),
114
- imagemin.optipng(),
115
- imagemin.svgo()
116
- ];
117
- // 画像の圧縮
118
- // $ gulp imageminで./src/img/base/フォルダ内の画像を圧縮し./src/img/フォルダへ
119
- // .gifが入っているとエラーが出る
120
- gulp.task('imagemin', function () {
121
- return gulp
122
- .src('./src/img/base/*.{png,jpg,gif,svg}')
123
- .pipe(imagemin(imageminOption))
124
- .pipe(gulp.dest('./src/img'));
125
- });
126
62
  ```
127
63
  package.json
128
64
  ```
129
65
  {
130
66
  "name": "gulptest",
131
67
  "version": "1.0.0",
132
- "description": "",
133
68
  "main": "index.js",
134
69
  "scripts": {
135
70
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -152,27 +87,13 @@
152
87
  "gulp-sass-glob": "^1.1.0",
153
88
  "imagemin-mozjpeg": "^8.0.0",
154
89
  "imagemin-pngquant": "^8.0.0"
155
- }
90
+ },
91
+ "dependencies": {},
92
+ "description": ""
156
93
  }
157
94
 
95
+
158
96
  ```![イメージ説明](a1cc9918fca534046a572c5c2d3689f9.png)
159
- ターミナル
160
- ```
161
- [16:07:49] Using gulpfile ~/Desktop/gulptest/gulpfile.js
162
- [16:07:49] Starting 'default'...
163
- [16:07:49] Starting 'browser-sync'...
164
- [16:07:49] Starting 'watch'...
165
- [16:07:49] Finished 'browser-sync' after 43 ms
166
- [Browsersync] Access URLs:
167
- --------------------------------------
168
- Local: http://localhost:3000
169
- External: http://192.168.1.104:3000
170
- --------------------------------------
171
- UI: http://localhost:3001
172
- UI External: http://localhost:3001
173
- --------------------------------------
174
- [Browsersync] Serving files from: ./
175
97
 
176
- ```
177
98
  簡単な見落としや理解不足でしたらすみません。
178
99
  お力添えをお願いします。

4

誤字

2020/02/13 13:49

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,8 @@
10
10
  ・gulp-ejs
11
11
  ・gulp-imagemin
12
12
 
13
- プラグイン全て機能していないので、他の部分に問題があるのかと考えましたが、node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・
13
+ プラグイン全て機能していないので、他の部分に問題があるのかと考えましたが、エラーメッセージなども見当たらないので問題の切り分けができず。
14
+ node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・
14
15
 
15
16
 
16
17
  mac version: 10.15.3 Catalina
@@ -173,6 +174,5 @@
173
174
  [Browsersync] Serving files from: ./
174
175
 
175
176
  ```
176
-
177
- エラーメッセージなども見当たらず、、簡単な見落としや理解不足でしたらすみません。
177
+ 簡単な見落としや理解不足でしたらすみません。
178
178
  お力添えをお願いします。

3

プラグイン名追加

2020/02/13 02:28

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,28 @@
1
1
  node.js、gulpインストール済み
2
- タイトルにあげたプラグイン等が使用できない状態です。
2
+ 下記プラグイン等が使用できない状態です。
3
+ ・glup-sass
4
+ ・gulp-plumper
5
+ ・gulp-notify
6
+ ・gulp-sass-glob
7
+ ・post-css
8
+ ・autoprefixer
9
+ ・browser-sync
10
+ ・gulp-ejs
11
+ ・gulp-imagemin
3
12
 
13
+ プラグイン全て機能していないので、他の部分に問題があるのかと考えましたが、node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・
14
+
15
+
4
16
  mac version: 10.15.3 Catalina
5
17
 
18
+ gulp
6
19
  CLI version: 2.2.0
7
20
  Local version: 4.0.2
8
21
 
22
+ node.js:v12.15.0
9
23
 
10
24
 
25
+
11
26
  gulpfile.js
12
27
  ```
13
28
  var gulp = require('gulp');

2

タグ追加

2020/02/13 02:26

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
File without changes

1

写真の追加

2020/02/13 01:39

投稿

benkyosuruo
benkyosuruo

スコア16

title CHANGED
File without changes
body CHANGED
@@ -139,7 +139,7 @@
139
139
  }
140
140
  }
141
141
 
142
- ```
142
+ ```![イメージ説明](a1cc9918fca534046a572c5c2d3689f9.png)
143
143
  ターミナル
144
144
  ```
145
145
  [16:07:49] Using gulpfile ~/Desktop/gulptest/gulpfile.js