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

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

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

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

Q&A

解決済

2回答

1696閲覧

gulp4.x系でリビルドをかけたいが、変更されるまでsrcがdistへ反映されない

trajanme

総合スコア21

gulp

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

0グッド

0クリップ

投稿2020/06/20 15:02

編集2020/06/20 22:37

以下のgulpfile.jsだと、gulp cleanしたあとにgulpコマンドでdistフォルダが再作成したいと考えております。

① ゴミをgulp cleanで消す
gulpコマンドでsrcフォルダの中身全部をdistへ反映

としたいのですが、

exports.default = (done) => {
src(paths.html.src).pipe(dest(paths.html.dest))
src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest))
done()
}

// こちらだとうまくいかない
exports.default = (done) => {
series(clean, parallel(updateHtml, compileSass))
done()
}

seriesparallelを使うときの前提が間違っている気がしております。

どなたかご教示いただければと思います。
gulp4の書き方とes6の書き方がごちゃまぜになっていて、そちらのミスの場合であったらすみません。

以下、package.jsonです。

package.json

{ "name": "tmp", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "browser-sync": "^2.26.7", "del": "^5.1.0", "gulp": "^4.0.2", "gulp-sass": "^4.1.0" } }

gulpfile.js

gulpfile.js

1const { src, dest, series, parallel } = require('gulp') 2const sass = require('gulp-sass') 3const del = require('del') 4const paths = { 5 root: 'src', 6 html: { 7 src: 'src/**/*.html', 8 dest: 'dist' 9 }, 10 sass: { 11 src: 'src/sass/**/*.scss', 12 dest: 'dist/style' 13 } 14} 15 16const clean = (done) => { 17 del('dist') 18 done() 19} 20 21const updateHtml = (done) => { 22 src(paths.html.src) 23 .pipe(dest(paths.html.dest)) 24 done() 25} 26 27const compileSass = (done) => { 28 src(paths.sass.src) 29 .pipe(sass({ 30 outputStyle: 'expanded' 31 })) 32 .pipe(dest(paths.sass.dest)) 33 done() 34} 35 36exports.clean = clean 37 38// gulp cleanをしたあとにこちらをやるとうまくいく 39exports.default = (done) => { 40 src(paths.html.src).pipe(dest(paths.html.dest)) 41 src(paths.sass.src).pipe(sass({outputStyle: 'expanded'})).pipe(dest(paths.sass.dest)) 42 done() 43} 44 45// こちらだとうまくいかない 46exports.default = (done) => { 47 series(clean, parallel(updateHtml, compileSass)) 48 done() 49}

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

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

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

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

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

guest

回答2

0

ベストアンサー

あなたと同じ様な環境を作って試してみました。
MacOSでもWindowsでも動いています。
(一部OS依存しているパッケージは再インストールしてますが)

Javascript

1exports.default = function () { 2 gulp.watch(paths.sass.src, series(clean_css, compileSass)); 3 gulp.watch(paths.html.src, series(clean_html, updateHtml)); 4};

他の人が使う時

他の人、がどういう状況なのかよくわかりませんが、環境の違いを調べてみてください。

投稿2020/06/21 00:40

technocore

総合スコア7337

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

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

0

gulpを叩くとdistフォルダが再生成されません。
exports.default = parallel(watchFiles, browserSyncFunc)

監視状態(watch)になるのですから、
srcに変更があってから、srcがdistへ反映されるのではないですか?

投稿2020/06/20 16:30

technocore

総合スコア7337

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

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

trajanme

2020/06/20 22:05

回答ありがとうございます。 > 監視状態(watch)になるのですから、 > srcに変更があってから、srcがdistへ反映されるのではないですか? 質問が一部よくありませんでしたが、 package.jsonとgulpfile.jsを他の人が使う時、 ① yarn install ② gulp では、エラーになる(変更がないため、distにファイルが生成されない)ことを解消したかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問