Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@nzzzz

[gulp4] gulpfileのつまずきアレコレ

More than 1 year has passed since last update.

初めてgulpfileを書きました。
ググると色々紹介記事が出てきましたが、いろんな書き方があり迷走したので、つまずいたこと、この先またつまずきそうなことのメモです。

前置き

  • gulp4使ってます
  • 見出しは、「[関連パッケージ・API]見出し」の形式で書いてます

[gulp-ejs] 拡張子が変わらないままエクスポートされる

▶︎ gulp-renameが別途必要!

gulp4からは、gulp-ejsの引数extに拡張子を渡す方法がなくなったらしいです。
参考にしたサイトがgulp3系を使っていた場合、注意です。

gulpfile
const gulp = require('gulp'); //gulp
const rename = require('gulp-rename'); //名前変更

//NGパターン
function htmlFunc() {
  return gulp
    .src('ejsファイルのパス')
    .pipe(ejs({}, {}, {ext: '.html'})) 
    .pipe(gulp.dest('出力先のパス'));
}

//OKパターン
function htmlFunc() {
  return gulp
    .src('ejsファイルのパス')
    .pipe(ejs())
    .pipe(rename({extname:'.html'})) 
    .pipe(gulp.dest('出力先のパス'));
}

参考サイト:gulp:「gulp-ejs」Ver 4.0.0でファイル出力時の拡張子を変更する方法

[autoprefixer] gridレイアウトにプレフィックスがつかない

▶︎ コードの記載が足りないかも?

gridレイアウトにプレフィックスを自動でつけるには、追加の記載が必要のようです。
flexレイアウト、@support へのプレフィックスは、デフォルトでonになっています。

gulpfile.js
const postcss = require('gulp-postcss'); //autoprefixerを使うのに必要
const autoprefixer = require('autoprefixer'); //prefixをつける

function stylesFunc() {
  return gulp
    .src('scssファイルのパス')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer({
      grid: 'autoplace', //gridレイアウトのプレフィックスを有効にする
    }) ]))
    .pipe(gulp.dest('出力先のパス');
}

参考サイト:npm autoprefixer

[browser-sync] ブラウザが自動更新されない

▶︎ <body>をちゃんとhtmlファイルに書く!

ちゃんとbodyタグを書かないと、自動でブラウザ更新してくれないようです。
「まだ作り途中だから...」と、端折ってはいけないのですね...。

参考サイト:【Gulp】browser-syncのLiveReloadが動かないときの直し方

▶︎ こっちもありかも?リロード用関数を独立させる

全く同じ症状で質問しているstackOverflowのスレッドに、「リロード用の関数は別で作らないとダメみたい」というコメントがついていました。bodyタグあるのに更新されない時は、これを試すのも良さそう。

There was an issue with my watch function and it seems necessary to have reloading done in a separate function.
引用元: Page not reloading/autoinjecting with Gulp 4 and Browsersync

[watch] 監視下のファイルを削除したら、エクスポート先の同ファイルも消したい

▶︎ .on(eventName, eventHandler)の形式で書く

公式ドキュメントのwatchのusageに載ってるこの形式.watch(globs, [options], [task]) で書いてたけども、コールバック内でeventやpathが取れずにかなり迷走しました...。(もしかしたら、私の書き方がどこか違うだけなのかも?)

よーく見たら、同じページにやり方書いてあった!
gulp #chokidar-instance

下の例ではこういうことをしています。

  • 監視下のファイルに変更またはファイル/フォルダ追加があった場合 → 関数A実行(①)
  • 監視下のファイルが削除された場合 → パスの文字列を出力先に置換(②)
gulpfile.js
const gulp = require('gulp'); //gulp
const del = require('del'); //フォルダやファイルを削除

//NGパターン
//①はうまくいくけど②は ``TypeError: Cannot read property 'replace' of undefined``とエラー
gulp.watch('ファイル取得元のパス', {events: ['change', 'add']}, gulp.series(関数A)); //①
gulp.watch('出力先のパス', {events: 'unlink'},(event, path) => {
  return del(path.replace(/src\/views/, '出力先のパス')); //②
});

//OKパターン
gulp.watch('ファイル取得元のパス')
  .on('all', (event, path) => {
    if (event === 'unlink') {
      return del(path.replace(/src\/views/, '出力先のパス'); //②
    }
    return 関数A; //①
});

参考サイト:gulp #chokidar-instance

指定できるイベントの種類は以下の通り。便利!
add / addDir / change / unlink / unlinkDir / ready / error / all

終わりに

公式ドキュメントって大事...!
参考にさせていただいた記事の執筆者さま、ありがとうございました。

「間違いがあるよ!」「こっちの書き方がいいよ!」など、お気付きの点がありましたらご指摘いただけると嬉しいです...!

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?