Gulpでの環境構築まとめ～Pug/Sass/TypeScript/BrowserSync～

3465 ワード
pug BrowserSync TypeScript gulp Sass Sass テキストリンク

はじめに

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

リポジトリ←公開しています。

使う場合

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

下記と組み合わせれば割と環境構築はOK！(と思いたい。)

※windowsで環境構築しています。

✅参考

Gulp4設定まとめ(Pug/Sass)


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

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


概要掴める。※実際に環境構築するまではちんぷんかんぷんでした。

環境構築


✅概要

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

HTMLはPug

CSSはSass

JavaScriptは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())
        .pipe(gulp.dest('./dist/js'))
    );
  })
});
gulp.task('default', gulp.series( gulp.parallel('browser-sync', 'sass', 'pug', 'ts')));

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


おわりに

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

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