Tools/gulp

Tools/gulp

gulp 컴파일시 JS async, await 오류

"uncaught ReferenceError: regeneratorRuntime is not defined" gulp로 개발하는데 자꾸 오류 뜸 babel로 js문법 변환 과정에서 생기는 오류 문법 변환을 @babel/preset-env로 설정해서 async를 regeneratorRuntime 모듈로 변환 나는 저런 모듈을 import 하지 않았기 때문에 오류 발생 해결방법 const js = () => gulp .src(routes.js.src) .pipe( bro({ transform: [ babelify.configure({ presets: [["@babel/preset-env", { targets: { chrome: "55" } }]], }), ["uglifyify", { global: true ..

Tools/gulp

gulp(3) js, git deploy

> npm i gulp-bro -D > npm i babelify -D > npm i uglifyify -D js파일 하나로 컴파일 컴파일하면서 babel js 압축 (공백 제거) -이전 setting에서 babel과의 차이점은 앞에껀 gulpfile.babel.js파일 안의 ES6을 바꾸는 것 -여기서는 src폴더에 있는 js들의 문법을 지원가능한 버전으로 바꾸는 것 gulp-bro babelify uglifify const js = () => gulp .src(routes.js.src) .pipe( bro({ transform: [ babelify.configure({ presets: ["@babel/preset-env"] }), ["uglifyify", { global: true }], ], }) ..

Tools/gulp

gulp(2) image, sass -> css

> npm i gulp-image -D > npm i gulp-sass node-sass -D > npm i gulp-autoprefixer -D > npm i gulp-csso -D image 압축 플러그인 sass => css 플러그인 css 호환성 플러그인 css 압축 플러그인(공백 제거) gulp-image 큰용량의 image일 경우 압축하는데 시간이 오래 걸림 따라서 watch 유무는 프로젝트에 맞게 잘 설정해야 편함 gulp-sass, node-sass import sass from "gulp-sass"; sass.compiler = require("node-sass"); gulp-sass는 node-sass를 컴파일러로 사용해서 이런식으로 적어줘야 함 nodeJS는 import/export ..

Tools/gulp

gulp(1) setting, pug -> html

폴더 구조 > npm init node_module과 package.json 생성 node_module .gitignore package.json src img js partials scss templates index.pug > npm i gulp-cli -g console 창에서 gulp실행 할 수 있음 > npm i gulp -D 개발환경으로 gulp 설치 > touch gulpfile.js gulp config파일 생성 > npm i @babel/{preset-env,core,register} -D > touch .babelrc { "presets": ["@babel/preset-env"] } babel 패키지 설치 후 버전 설정 > mv gulpfile.js gulpfile.babel.js gu..

비비빅B
'Tools/gulp' 카테고리의 글 목록