gulpfileを自分で書きたい その3 ― https://kihara.coresv.com/2019/02/15/217/I log.

gulpfileを自分で書きたい その3

この記事の趣旨

gulp使えるようになってほしいという神様の言葉をいただき、gulp用のコマンドだけ覚えて、神様からもらったgulpfileを大事に使ってきたんですけど、それじゃいけないな、と思ったので調べながらメモをしていく。

その3です。

全体を通しての最終的なgulpfileの目標

  • pugをhtmlにコンパイル
  • sassをmin化したcssにコンパイル
  • es6をmin化したjsにコンパイル
  • 上記いずれかのコンパイル後にブラウザをリロードして反映
  • 神様のgulpfileを見ずに作る

1つ目から4つ目までは神様にいただいたgulpfileでできていたので、最低限の目標。

そして、今回の目標

  • それぞれのファイルを監視して、変更があればログを出す。
  • ブラウザシンク
  • コンパイルしないファイルはコピー←ココ
  • 各種コンパイル

コンパイルしないファイルはコピー

dest内は完全に触らないということにしたいため、.pug、.scss、.es6以外のファイルはコピーします。

と、いうとなんか簡単そうな気がしますが、コピーだけじゃなくて削除したファイルはdest内も削除してほしいし、ディレクトリ構成はそのままコピーしてほしい。

意外と要望が多いコピーなのです。

…納品ファイルまとめるときも、差分があるファイルだけをディレクトリ構成そのままでまとめたいなぁ…。こういうのもできるのかなぁ…。今度やってみよう。

さっそく書いてみる

単純なコピーなら、src()で指定したものをdest()でできるはず。

ディレクトリ構成はそのままなのだろうか…。

// import
var browserSync = require('browser-sync');
var gulp = require('gulp');

// var
var paths = {
  dest: 'dest',
  src: {
    pug: ['src/**/*.pug', '!src/**/_*.pug'],
    sass: ['src/**/*.scss', '!src/**/_*.scss'],
    es6: 'src/**/*.es6',
    etc: ['src/**/*.*', '!src/**/*.pug', '!src/**/*.scss', '!src/**/*.es6']
  }
};

// functions
function browsweSyncStart(){
  browserSync({
    server: {
      baseDir: './dest/',
      index: 'index.html'
    }
  });
}

function sass(cb){
  console.log('css');
  cb();
}

function es6(cb){
  console.log('es6');
  cb();
}

function pug(cb){
  console.log('pug');
  cb();
}

function etc(cb){
  gulp.src(paths.src.etc)
    .pipe(gulp.dest(paths.dest));
  cb();
}

function browserReload(cb){
  browserSync.reload();
  cb();
}

//watch
gulp.watch(paths.src.sass, scss);
gulp.watch(paths.src.es6, es6);
gulp.watch(paths.src.pug, pug);
gulp.watch(paths.src.etc, etc);
gulp.watch(paths.dest, browserReload);

// export
exports.default = browsweSyncStart;

etc()への追記だけで、コピーだけはできました。

ディレクトリ構成も大丈夫!!!

削除したときに削除

予想はしてたけど削除はできてない。

ただ、ファイル削除の際に削除したことはwatchにより監視されている。

そのため、やり方は2つあるのかなと思います。

  • dest内を全削除して、コピーやコンパイルをやり直す
  • 削除されたファイルのパスを取得して、対応するdest内のファイルを削除

どちらがいいのだろう…?

dest内を全削除して、コピーやコンパイルをやり直す

こちらなら、「変更があれば全削除、コピー&コンパイル」にしてしまえば、「削除したかどうか」でイベントを取る必要はない気もします。

でも、行動の内容が多いのでスピード的にはどうなのだろう…?

削除されたファイルのパスを取得して、対応するdest内のファイルを削除

watchのオプションでイベントをとれるので、「追加・変更されたときにコピー」、「削除された場合にパスを渡して対応するdest内のファイルを削除」の二つにわければ、局所的な内容で済むので早いのかな?

後回しします…!

削除については、コンパイルが終わってからスピード検証します。

というわけで、また次回

次回はコンパイルします。

目次


categories

脱コピペ

tags

,

Update log

公開:2019/2/15@9:52