[Gulp] prettier 기능 추가하기 (줄 정리)

gulp 이용 중에 간혹 파일의 줄 정리가 깔끔하지 않은 것이 있다.

이런 부분이 신경 쓰이는 사람들을 위한 줄 정리 기능이다.

 

gulp-prettier 설치

npm install --save-dev prettier
npm install --save-dev @bdchauvette/gulp-prettier

 

gulpfile.babel.js에 추가

import gulp from "gulp";
import prettier  from "@bdchauvette/gulp-prettier";

const routes = {
  js: {
    watch: "src/js/**/*.js",
    src: "src/js/*.js",
    dest: "build/js",
  },
};

const js = () => 
  gulp
    .src(routes.js.src)
    .pipe(
      prettier({
        singleQuote: true,
        trailingComma: "all"
      })
    )
    .pipe(gulp.dest(routes.js.dest))
    
const assets = gulp.series([js]);

export const dev = gulp.series([assets])

 

노마드코더에서 gulpfile.babel.js로 변환시켰던 기준으로 (참고 : https://leeda-cloud.tistory.com/64 ) 위처럼 추가했는데 그냥 gulpfile.js인 사람은 위의 방식이 아닌 아래 방식으로 추가하면 된다.

 

gulpfile.js에 추가

const gulp = require("gulp");
const prettier = require("@bdchauvette/gulp-prettier");

gulp.task("prettify", () =>
  gulp
    .src("src/**/*.js")
    .pipe(
      prettier({
        // Normal prettier options, e.g.:
        singleQuote: true,
        trailingComma: "all"
      })
    )
    .pipe(gulp.dest(file => file.base))
);

 

html 파일로 테스트해본 결과!

적용 전

적용 후

잘 실행된다.

 

 

https://github.com/bdchauvette/gulp-prettier

GitHub - bdchauvette/gulp-prettier: Gulp plugin to format code with prettier