質問編集履歴

2

質問内容にフォーカスさせてgulpfile.jsを変更

2020/06/20 22:37

投稿

trajanme
trajanme

スコア21

test CHANGED
File without changes
test CHANGED
@@ -1,22 +1,42 @@
1
- 以下の`gulpfile.js`だと、`gulp clean`したあとに`gulp`を叩くと`dist`フォルダが再されせん
1
+ 以下の`gulpfile.js`だと、`gulp clean`したあとに`gulp`コマンドで`dist`フォルダが再したいと考えており
2
2
 
3
3
 
4
4
 
5
- 意図としては、
6
-
7
5
  ① ゴミを`gulp clean`で消す
8
6
 
9
- ② `src`フォルダの中身全部を`dist`へ反映(できれば`gulp`コマンド単体でいきたい)
10
-
11
- `gulp`コマンドでそこからの変更を`watch`して`dist`へ反映
7
+ `gulp`コマンドで`src`フォルダの中身全部を`dist`へ反映
12
-
13
- となることを期待しています。
14
8
 
15
9
 
16
10
 
17
- `gulp`(`gulp watchFiles`に相当)だけなく`gulp updateHtml`、`gulp compileSass`でもできないため、
11
+ としたいのすが
18
12
 
13
+
14
+
15
+ exports.default = (done) => {
16
+
17
+ src(paths.html.src).pipe(dest(paths.html.dest))
18
+
19
+ src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest))
20
+
21
+ done()
22
+
23
+ }
24
+
25
+
26
+
19
- そもそも何前提が異るのではなか、と感じています。
27
+ // こちらだとうまくいかない
28
+
29
+ exports.default = (done) => {
30
+
31
+ series(clean, parallel(updateHtml, compileSass))
32
+
33
+ done()
34
+
35
+ }
36
+
37
+
38
+
39
+ `series`や`parallel`を使うときの前提が間違っている気がしております。
20
40
 
21
41
 
22
42
 
@@ -68,11 +88,9 @@
68
88
 
69
89
  ```gulpfile.js
70
90
 
71
- const { src, dest, watch, parallel } = require('gulp')
91
+ const { src, dest, series, parallel } = require('gulp')
72
92
 
73
93
  const sass = require('gulp-sass')
74
-
75
- const browserSync = require('browser-sync')
76
94
 
77
95
  const del = require('del')
78
96
 
@@ -94,17 +112,9 @@
94
112
 
95
113
  dest: 'dist/style'
96
114
 
97
- },
98
-
99
- image: {
100
-
101
- src: 'src/img/**/*.{jpg, jpeg, png, svg, gif}',
102
-
103
- dest: 'dist/img'
104
-
105
115
  }
106
116
 
107
- };
117
+ }
108
118
 
109
119
 
110
120
 
@@ -124,8 +134,6 @@
124
134
 
125
135
  .pipe(dest(paths.html.dest))
126
136
 
127
- .pipe(browserSync.reload({ stream: true }))
128
-
129
137
  done()
130
138
 
131
139
  }
@@ -144,7 +152,23 @@
144
152
 
145
153
  .pipe(dest(paths.sass.dest))
146
154
 
155
+ done()
156
+
157
+ }
158
+
159
+
160
+
161
+ exports.clean = clean
162
+
163
+
164
+
165
+ // gulp cleanをしたあとにこちらをやるとうまくいく
166
+
167
+ exports.default = (done) => {
168
+
147
- .pipe(browserSync.reload({ stream: true }))
169
+ src(paths.html.src).pipe(dest(paths.html.dest))
170
+
171
+ src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest))
148
172
 
149
173
  done()
150
174
 
@@ -152,40 +176,14 @@
152
176
 
153
177
 
154
178
 
155
- const browserSyncFunc = () => {
179
+ // こちらだとうまくいかない
156
180
 
157
- browserSync({
181
+ exports.default = (done) => {
158
182
 
159
- server: {
183
+ series(clean, parallel(updateHtml, compileSass))
160
184
 
161
- baseDir: 'dist/',
162
-
163
- index: 'index.html',
164
-
165
- },
166
-
167
- })
185
+ done()
168
186
 
169
187
  }
170
188
 
171
-
172
-
173
- const watchFiles = () => {
174
-
175
- watch(paths.html.src, updateHtml)
176
-
177
- watch(paths.sass.src, compileSass)
178
-
179
- }
180
-
181
-
182
-
183
- exports.default = parallel(watchFiles, browserSyncFunc)
184
-
185
- exports.updateHtml = updateHtml
186
-
187
- exports.compileSass = compileSass
188
-
189
- exports.clean = clean
190
-
191
189
  ```

1

質問の意図がわかりにくかったため、記載を追加

2020/06/20 22:37

投稿

trajanme
trajanme

スコア21

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,12 @@
11
11
  ③ `gulp`コマンドでそこからの変更を`watch`して`dist`へ反映
12
12
 
13
13
  となることを期待しています。
14
+
15
+
16
+
17
+ `gulp`(`gulp watchFiles`に相当)だけでなく、`gulp updateHtml`、`gulp compileSass`でもできないため、
18
+
19
+ そもそも何か前提が異なるのではないか、と感じています。
14
20
 
15
21
 
16
22
 
@@ -176,6 +182,10 @@
176
182
 
177
183
  exports.default = parallel(watchFiles, browserSyncFunc)
178
184
 
185
+ exports.updateHtml = updateHtml
186
+
187
+ exports.compileSass = compileSass
188
+
179
189
  exports.clean = clean
180
190
 
181
191
  ```