【フロントエンド】Gulpでの環境構築まとめ【Pug/Sass/TypeScript】

はじめに

フロントエンドの開発をする際に、なるべく現場を想定した環境を構築して開発したいなと思ったのでまとめました。

リポジトリ

git clone https://github.com/chobi1125/gulp-dev.git // ローカルにダウンロード
npm i // 諸々インストール
gulp // 起動・自動コンパイル

下記と組み合わせれば割と環境構築はOKかと!

【Babel+Webpack】JavaScript(ES6)の実行環境構築

✅参考

Gulp4設定まとめ(Pug/Sass)

各プラグインについてまとめてくれている。

gulpとbabelとwebpackというフロント開発3銃士

概要は掴める。個人的には実際に環境構築するまでは意味不明でした。。。笑

環境構築

✅概要

今回は以下の機能を使えるようにしていきたいと思います。

HTMLはPug

CSSはSass

JavaScriptはBabel+Webpack+TypeScript

サーバーはBrowser-sync

上記をGulpで実行管理していこうと思います。

✅環境構築

package.jsonの作成

npm init -y

プラグインのインストール

npm install -D gulp gulp-sass gulp-pug browser-sync gulp-typescript typescript

gulpfile.jsを作成

const gulp = require('gulp');
      pug = require('gulp-pug');
      sass = require('gulp-sass');
      typescript = require('gulp-typescript');
      browserSync =require("browser-sync");

// サーバー起動
gulp.task("browser-sync", () => {
  browserSync({ server: {
      baseDir: "./dist",
      index : "index.html"
    }
  })
})
gulp.task('pug', () => {
  // .pugファイルを取得
  return gulp.watch('./src/**/*.pug', function(){
    // gulp.src('取得するファイル') タスクの対象となるファイルを取得
    return(
      gulp.src(
          ['./src/**/*.pug', '!./src/**/_*.pug']
      )
        // pipe() 1つ一つの処理をつなげる。
        .pipe(pug({
            pretty: true
        }))
        // gulp.dest('保存先フォルダー') 処理を行ったファイルを指定の場所に保存
        .pipe(gulp.dest('./dist'))
    );
  })
});
// style.scssをタスクを作成する
gulp.task("sass", function() {
  return gulp.watch('./src/scss/*.scss', function(){
    // style.scssファイルを取得
    return (
      gulp
        .src('./src/scss/*.scss')
        // Sassのコンパイルを実行
        .pipe(sass())
        // cssフォルダー以下に保存
        .pipe(gulp.dest("./dist/css"))
    );
  })
});
gulp.task('ts', function() {
  return gulp.watch('./src/ts/*.ts', function(){
    return(  
      gulp
        .src('./src/ts/*.ts')
        .pipe(typescript(({ target: "ES6"})))
        .pipe(gulp.dest('./dist/js'))
    );
  })
});
gulp.task('default', gulp.series( gulp.parallel('browser-sync', 'sass', 'pug', 'ts')));

http://localhost:3000/へアクセスして確認。

※追記

トランスパイル後JSの変数がvarになるのが嫌だったのでes6に指定しました。

参考:gulp-tscとgulp-typescriptの利用方法の違いについて

躓いた点

✅BrowserSyncのリロード処理

これだけ未実装。。。以下を参考にdoneを入れたりしたもののだめ。。。

Gulp4設定まとめ(Pug/Sass)

【gulp.js】Browsersyncのリロード1回しかされない

gulp 4 で browser-sync が、1度しかリロードしない。

最後の記事でFunction型の方がいた。これ参考に深掘りしたい。

おわりに

ちゃんとメモったので次からスムーズに環境構築できるようにしたい。

言い訳はできなくなったので、ちゃんとPug/Sass/TypeScriptを使ってアプリ制作取り組んでいこうと思います。笑

備忘録

✅taskをまとめる

要チェック*Gulpエラー:Task function must be specified

gulp.task('default', gulp.series( gulp.parallel('sass', 'pug')))

v3だとこうだったらしい。

gulp.task('default', ['task1', 'task2'], function(){

✅BrowserSync

はじめてのbrowserSync

ほぼ初めて使ったのでこちらを参考。package.jsonがあるディレクトリに依存するっぽい。

"start": "browser-sync start --server --files='./*.html, ./*.css'"

🙄–server=”ディレクトリ”で親ディレクトリ指定できると思いきやできず。

http://localhost:3000/dist/で動作確認しました。自動リロードがなぜかされず。。。

コピペで始めるgulp入門(1):ライブリロード編

※おそらくv3で書かれているので要注意

以下で起動できた。

gulp.task("browser-sync", () => {
  browserSync({ server: {
      baseDir: "./dist",
      index : "index.html"
    }
  })
})

🙄リロード処理が上手くいきませんでしたが一旦保留します。

Visual Studio Code で TypeScript 環境を設定してデバッグ実行する

tsconfig.jsonの作成

tsc --init

🙄これでコンパイル前後のファイルで変数名かぶりが起きなくなりました。おって深掘りしたい。。。

※デバッグ機能でChromeをF5ボタンで起動できるの鬼便利!!初めて知った。

コメントを残す