걸프 - 노마드 코더

webpack...?

바벨...?

걸프 : Task Runner -> 걸프에서 task를 실행하면 결과값을 준다(webpack 대용으로 쓸 수 있다)

Task: 이미지를 가져와서 압축한 뒤 특정 폴더에 넣는다던가

가장 최신의 js 코드를 기존 코드에 컴파일 해준다(구형 브라우저가 이해할 수 있도록)

 

pug->html + scss->css + javascript->구형 자바스크립트 + github 배포

를 도와준다

 

mkdir src/scss src/js src/img src/templates

touch src/index.pug src/js/init.js src/js/main.js

mv src/js/init.js src/js/util.js

npm init

 

webpack.config와 비슷하게 gulpfile이라는 것을 만들어서 사용한다

npm add gulp -> package.json에 추가해준다

 

.babelrc
{

    "presets": ["@babel/preset-env"]

}

 

 

npm add @babel/{register, core}

 

gulp-pug -> pug 템플릿을 컴파일 해준다
https://www.npmjs.com/package/gulp-pug

npm i gulp-pug -D

gulp-pug

 

 

dev시작 -> pug 시작 -> pug 끝 -> dev 끝

-->build 파일을 생성해준다

npm add del

-->파일을 삭제 이후 다시 build 파일을 생성한다

 

걸프 웹서버를 만들어준다

npm install --save-dev gulp-webserver

걸프 이미지 파일 처리를 도와준다

npm install --save-dev gulp-image

 

출처 : https://nomadcoders.co/gulp-for-beginners/lectures/1634

All Courses – 노마드 코더 Nomad Coders

참고할만한 블로그: https://bbbicb.tistory.com/15?category=879118 

gulp(1) setting, pug -> html