gulpfilを自分で書きたい その4 ― http://kihara.coresv.com/2019/02/18/219/I log.

gulpfilを自分で書きたい その4

この記事の趣旨

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

その4です。

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

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

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

そして、今回の目標

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

いよいよ本丸、コンパイル…!

コンパイルってまとめたけど、流れ一緒でいいんだよな…!?

よし、ではまずmin化のないpugから!

pugコンパイル

モジュールはpug…?かな?と調べたら、gulpでコンパイルするためのgulp-pugがあるみたい。

npm i -D gulp-pugしました。

【参考】GulpでテンプレートエンジンのPugを使ってみた | PC ウェブログ

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

// 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 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, scss);
gulp.watch(paths.src.es6, es6);
gulp.watch(paths.src.pug, pugCompile);
gulp.watch(paths.src.etc, etc);
gulp.watch(paths.dest, browserReload);

// export
exports.default = browsweSyncStart;

えー…簡単…。人のを参考にしたとはいえ簡単…。簡単すぎてびびる…。

そういえば_layout.pugとかよく使うので、アンダースコアで始まるインクルード用のpugは除外することにしました。

そして、関数名をpugにしていたが呼び出したモジュールをpugにして、関数名を変更。

sassコンパイル

いろんな解説記事を読んでるけど、方法がいろいろありすぎて軽く混乱する…。

min化の他にも、ベンダープレフィックスを自動的につけてくれるものもあるみたいなので、そちらも導入したいところ。

そういえば神様のgulpfileにもその設定あったのだろうか…。使いこなせてなかったのかも…。(そもそもatomエディターで勝手につける設定にしていた)

とりあえず書くか…!!!! sassだけでも段階踏んでいけばいいよね…!?

npm i -D sass gulp-sass gulp-autoprefixer gulp-clean-css gulp-rename

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

// 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']
  }
};
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()) //min化
    .pipe(rename({ suffix: '.min' })) //.min.cssにリネーム
    .pipe(gulp.dest(paths.dest));
  cb();
}

function es6(cb){
  console.log('es6');
  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, sassCompile);
gulp.watch(paths.src.es6, es6);
gulp.watch(paths.src.pug, pugCompile);
gulp.watch(paths.src.etc, etc);
gulp.watch(paths.dest, browserReload);

// export
exports.default = browsweSyncStart;

sassも関数名の変更とインクルードファイルを対象ファイルから除外しました。

あと、一応gulp-sassのページにsassのコンパイル形式はsassかnode-sassか明示してねって書いてあったので書いてます。

es6コンパイル

ばべるですよね! わたししってる! ばべるですよね!(わかってない)

なんか、es6っていう新しい書き方だと対応していないブラウザがあるから(IEとかIEとかIEとか)es6をes5にコンパイルしてもらわないといけないってことですよね。

アロー関数って、アロー周辺が急に10文字くらい記号だけになるから不安になるんですけど、この気持ちわかる人います…?

npm i -D gulp-babel @babel/core @babel/preset-env @babel/polyfill gulp-uglify

@babel/coreがないよってエラーになった。

// import
var browserSync = require('browser-sync');
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: {
    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()) //min化
  .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, sassCompile);
gulp.watch(paths.src.es6, babelCompile);
gulp.watch(paths.src.pug, pugCompile);
gulp.watch(paths.src.etc, etc);
gulp.watch(paths.dest, browserReload);

// export
exports.default = browsweSyncStart;

できた…!

jsのコンパイルは、神様はwebpackも使っていたと思うけど、できたしええんか…?

あとで見比べてみよう。

というわけで、また次回

次回は削除問題に戻ります。

目次


categories

脱コピペ

tags

,

Update log

公開:2019/2/18@9:40