質問編集履歴
2
質問内容にフォーカスさせてgulpfile.jsを変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,14 +1,24 @@
|
|
|
1
|
-
以下の`gulpfile.js`だと、`gulp clean`したあとに`gulp`
|
|
1
|
+
以下の`gulpfile.js`だと、`gulp clean`したあとに`gulp`コマンドで`dist`フォルダが再作成したいと考えております。
|
|
2
2
|
|
|
3
|
-
意図としては、
|
|
4
3
|
① ゴミを`gulp clean`で消す
|
|
5
|
-
② `src`フォルダの中身全部を`dist`へ反映(できれば`gulp`コマンド単体でいきたい)
|
|
6
|
-
|
|
4
|
+
② `gulp`コマンドで`src`フォルダの中身全部を`dist`へ反映
|
|
7
|
-
となることを期待しています。
|
|
8
5
|
|
|
9
|
-
`gulp`(`gulp watchFiles`に相当)だけでなく、`gulp updateHtml`、`gulp compileSass`でもできないため、
|
|
10
|
-
|
|
6
|
+
としたいのですが、
|
|
11
7
|
|
|
8
|
+
exports.default = (done) => {
|
|
9
|
+
src(paths.html.src).pipe(dest(paths.html.dest))
|
|
10
|
+
src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest))
|
|
11
|
+
done()
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// こちらだとうまくいかない
|
|
15
|
+
exports.default = (done) => {
|
|
16
|
+
series(clean, parallel(updateHtml, compileSass))
|
|
17
|
+
done()
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
`series`や`parallel`を使うときの前提が間違っている気がしております。
|
|
21
|
+
|
|
12
22
|
どなたかご教示いただければと思います。
|
|
13
23
|
gulp4の書き方とes6の書き方がごちゃまぜになっていて、そちらのミスの場合であったらすみません。
|
|
14
24
|
|
|
@@ -33,9 +43,8 @@
|
|
|
33
43
|
|
|
34
44
|
gulpfile.js
|
|
35
45
|
```gulpfile.js
|
|
36
|
-
const { src, dest,
|
|
46
|
+
const { src, dest, series, parallel } = require('gulp')
|
|
37
47
|
const sass = require('gulp-sass')
|
|
38
|
-
const browserSync = require('browser-sync')
|
|
39
48
|
const del = require('del')
|
|
40
49
|
const paths = {
|
|
41
50
|
root: 'src',
|
|
@@ -46,12 +55,8 @@
|
|
|
46
55
|
sass: {
|
|
47
56
|
src: 'src/sass/**/*.scss',
|
|
48
57
|
dest: 'dist/style'
|
|
49
|
-
},
|
|
50
|
-
image: {
|
|
51
|
-
src: 'src/img/**/*.{jpg, jpeg, png, svg, gif}',
|
|
52
|
-
dest: 'dist/img'
|
|
53
58
|
}
|
|
54
|
-
}
|
|
59
|
+
}
|
|
55
60
|
|
|
56
61
|
const clean = (done) => {
|
|
57
62
|
del('dist')
|
|
@@ -61,7 +66,6 @@
|
|
|
61
66
|
const updateHtml = (done) => {
|
|
62
67
|
src(paths.html.src)
|
|
63
68
|
.pipe(dest(paths.html.dest))
|
|
64
|
-
.pipe(browserSync.reload({ stream: true }))
|
|
65
69
|
done()
|
|
66
70
|
}
|
|
67
71
|
|
|
@@ -71,26 +75,21 @@
|
|
|
71
75
|
outputStyle: 'expanded'
|
|
72
76
|
}))
|
|
73
77
|
.pipe(dest(paths.sass.dest))
|
|
74
|
-
.pipe(browserSync.reload({ stream: true }))
|
|
75
78
|
done()
|
|
76
79
|
}
|
|
77
80
|
|
|
81
|
+
exports.clean = clean
|
|
82
|
+
|
|
83
|
+
// gulp cleanをしたあとにこちらをやるとうまくいく
|
|
78
|
-
|
|
84
|
+
exports.default = (done) => {
|
|
79
|
-
browserSync({
|
|
80
|
-
server: {
|
|
81
|
-
baseDir: 'dist/',
|
|
82
|
-
|
|
85
|
+
src(paths.html.src).pipe(dest(paths.html.dest))
|
|
83
|
-
|
|
86
|
+
src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest))
|
|
84
|
-
|
|
87
|
+
done()
|
|
85
88
|
}
|
|
86
89
|
|
|
90
|
+
// こちらだとうまくいかない
|
|
87
|
-
|
|
91
|
+
exports.default = (done) => {
|
|
88
|
-
watch(paths.html.src, updateHtml)
|
|
89
|
-
|
|
92
|
+
series(clean, parallel(updateHtml, compileSass))
|
|
93
|
+
done()
|
|
90
94
|
}
|
|
91
|
-
|
|
92
|
-
exports.default = parallel(watchFiles, browserSyncFunc)
|
|
93
|
-
exports.updateHtml = updateHtml
|
|
94
|
-
exports.compileSass = compileSass
|
|
95
|
-
exports.clean = clean
|
|
96
95
|
```
|
1
質問の意図がわかりにくかったため、記載を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
③ `gulp`コマンドでそこからの変更を`watch`して`dist`へ反映
|
|
7
7
|
となることを期待しています。
|
|
8
8
|
|
|
9
|
+
`gulp`(`gulp watchFiles`に相当)だけでなく、`gulp updateHtml`、`gulp compileSass`でもできないため、
|
|
10
|
+
そもそも何か前提が異なるのではないか、と感じています。
|
|
11
|
+
|
|
9
12
|
どなたかご教示いただければと思います。
|
|
10
13
|
gulp4の書き方とes6の書き方がごちゃまぜになっていて、そちらのミスの場合であったらすみません。
|
|
11
14
|
|
|
@@ -87,5 +90,7 @@
|
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
exports.default = parallel(watchFiles, browserSyncFunc)
|
|
93
|
+
exports.updateHtml = updateHtml
|
|
94
|
+
exports.compileSass = compileSass
|
|
90
95
|
exports.clean = clean
|
|
91
96
|
```
|