gulpfileを自分で書きたい その5 ― https://kihara.coresv.com/2019/02/19/221/I log.

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

この記事の趣旨

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

その5です。

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

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

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

そして、今回の目標

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

比べるのは下記

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

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

// import
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var cleanCss = require('gulp-clean-css');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');

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

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

sass.compiler = require('sass');
function allCompile(cb){
  gulp.src(paths.src.sass)
    .pipe(sass())
    .pipe(autoprefix({ browsers: targetBrowser }))
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));

  gulp.src(paths.src.es6)
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));

  gulp.src(paths.src.pug)
    .pipe(pug())
    .pipe(gulp.dest(paths.dest));

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

function clean(){
  return del(paths.dest);
}

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

//watch
gulp.watch(paths.src.all, gulp.series(clean, allCompile, browserReload));

// export
exports.default = gulp.series(clean, allCompile, browsweSyncStart);

複数の関数にして、複数のwatchを走らせていましたが、watchを一つにまとめて、何か変更があればすべて削除し、すべてコンパイルするという指定にしました。

これで、削除したファイルは確実に消えます。

$ npx gulp
[10:39:20] Using gulpfile ~\github\gulp_study\gulpfile.js
[10:39:20] Starting 'default'...
[10:39:20] Starting 'clean'...
[10:39:20] Finished 'clean' after 15 ms
[10:39:20] Starting 'allCompile'...
[10:39:20] Finished 'allCompile' after 20 ms
[10:39:20] Starting 'browsweSyncStart'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.16:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dest/
[10:39:31] Starting 'clean'...
[10:39:31] Finished 'clean' after 28 ms
[10:39:31] Starting 'allCompile'...
[10:39:31] Finished 'allCompile' after 14 ms
[10:39:31] Starting 'browserReload'...
[10:39:31] Finished 'browserReload' after 6.57 ms
[Browsersync] Reloading Browsers...

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

…これ、上のテストがもっと時間かかるのでは?っていう仮説のもとにテストすることにしたので、上が意外と早くてねぇ…。比較…必要ある…?という気がしてきましてね…。

というわけで、とりあえず削除したファイルのパスを取得するだけのものにしてみました。

// import
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var cleanCss = require('gulp-clean-css');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');

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

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

sass.compiler = require('sass');
function sassCompile(cb){
  gulp.src(paths.src.sass)
    .pipe(sass())
    .pipe(autoprefix({ browsers: targetBrowser }))
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));
  cb();
}

function babelCompile(cb){
  gulp.src(paths.src.es6)
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));
  cb();
}

function pugCompile(cb){
  gulp.src(paths.src.pug)
    .pipe(pug())
    .pipe(gulp.dest(paths.dest));
  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, {events: ['add','change']}, sassCompile);
gulp.watch(paths.src.es6, {events: ['add','change']}, babelCompile);
gulp.watch(paths.src.pug, {events: ['add','change']}, pugCompile);
gulp.watch(paths.src.etc, {events: ['add','change']}, etc);
gulp.watch(paths.dest, {events: ['add','change']}, browserReload);
gulp.watch(paths.src.all).on('unlink', function(path, stats){
  var pathNum = path.indexOf('.');
  path = path.substring(3, pathNum);
  var delFile = 'dest'+path+'.*';
  if(delFile.length){
    return del(delFile);
  }
});

// export
exports.default = gulp.series(
  pugCompile,
  sassCompile,
  babelCompile,
  etc,
  browsweSyncStart
);
$ npx gulp
[15:25:20] Using gulpfile ~\github\gulp_study\gulpfile.js
[15:25:20] Starting 'default'...
[15:25:20] Starting 'pugCompile'...
[15:25:20] Finished 'pugCompile' after 11 ms
[15:25:20] Starting 'sassCompile'...
[15:25:20] Finished 'sassCompile' after 5.19 ms
[15:25:20] Starting 'babelCompile'...
[15:25:20] Finished 'babelCompile' after 3.03 ms
[15:25:20] Starting 'etc'...
[15:25:20] Finished 'etc' after 2.68 ms
[15:25:20] Starting 'browsweSyncStart'...
[15:25:20] Starting 'browserReload'...
[15:25:20] Finished 'browserReload' after 12 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.16:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dest/

関数化していないので、ファイルを消してもスタートしました、終了しましたというお知らせが出ないのですが、予定通りの結果になっています。

その際は、コンパイルもリロードもいらないかなと思います。

ただ、削除するときもgulpを起動しておかないといけない。

1秒以下の誤差程度の違いではありますが、やっぱり全削除・全コピー&コンパイルよりも1度の動作は早いです。もしも大きなプロジェクトになったら気になる差になってくる…かも…?

目標達成!

自力でgulpfileを書くことができました。

「gulp min」で検索していたら画像圧縮が引っ掛かったので、こちらの機能もつけ足したりして最強のgulpfileを目指したいです。

神様はjsのコンパイルの際にはwebpackを使っていたので、webpackを使う方法も勉強したいところです。

目次


categories

脱コピペ

tags

,

Update log

公開:2019/2/19@9:48