gulpfileを自分で書きたい その2 ― http://kihara.coresv.com/2019/02/14/215/I log.

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

この記事の趣旨

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

その2です。

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

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

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

そして、今回の目標

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

それぞれのファイルを監視して、変更があればログを出す

監視っていうのが重要っぽいからな。

それでできたのがこちら。コンソールを出すだけのものです。

// import
var gulp = require('gulp');

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

// functions
function defaultTask(cb){
  console.log('default');
  cb();
}

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

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

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

function etc(cb){
  console.log('etc');
  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);

// export
exports.default = defaultTask;

ちょっとハマったのが、その他のファイルをワイルドカードの*.*(全部)で指定したので、pug等を含まないようにする書き方。

パスを読み込む際、配列にして呼び出すことができるので、配列に入れて無視したいものは!を使う。

あと…コールバック関数もよくわからず使っていることがよくわかった。

コールバック関数の完全な理解は後回しにして、とにかくコールバック関数を入れていないと1度しかイベントが起こらないということだけ理解。

今回はbuildするだけのタスクなど、watchしなくていいタスクを入れていないので、watchを関数内で呼び出さずにそのまま書いています。

ブラウザシンク

ブラウザシンクに関しては、npmのモジュール説明ページみたいなところに全然説明なかったので、詳しく解説しているサイトを参考にしました。

【参考】サックっとbrowser-syncを設定

// 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){
  console.log('etc');
  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;

というわけで、また次回

次回はコピーします。

目次


categories

脱コピペ

tags

,

Update log

公開:2019/2/14@9:49