Gulp에서의 환경 구축 정리～Pug/Sass/TypeScript/BrowserSync～

소개

프런트 엔드의 개발을 할 때, 가능한 한 현장에 가까운 환경을 구축해 개발하고 싶다고 생각했기 때문에 정리했습니다.

리포지토리 ← 공개하고 있습니다.

사용하는 경우

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

아래와 조합하면 비교적 환경 구축은 OK! (라고 생각하고 싶다.)

※windows로 환경 구축하고 있습니다.

✅참고
Gulp4 설정 요약 (Pug / Sass)
각 플러그인에 대해 정리해 준다.
gulp, babel, webpack이라는 전면 개발 3 총사
개요 잡는다. ※실제로 환경 구축할 때까지는 흠뻑 빠졌습니다.

환경 구축

✅ 개요

이번에는 이하의 기능을 사용할 수 있도록 해 가고 싶습니다.

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를 사용해 앱 제작 노력해 나가려고 생각합니다. 웃음