Web/more

[gulp] include + sass + watch 초간단 셋팅하기

node -v v18.12.0 gulp -v CLI version: 2.3.0 Local version: 4.0.2 1. 터미널을 연다. 2. 경로는 작업할 폴더를 향하게 한다. 3. html, scss 환경이다. 🤗 gulp 환경 셋팅 //package.json 생성 배포할 때 반드시 필요한 파일이다. //별다른 값이 없으면 계속 엔터친다. npm init //gulp를 전역적으로 설치한다. 최초 1회만 하면 된다. npm i gulp -g //해당 폴더에서 gulp를 로컬 설치한다. npm i gulp --save-dev //또는 npm i gulp -D //gulp가 잘 설치되었는지 버전 확인한다. gulp -v 🤗 필요한 패키지 설치 //인클루드 설치 npm i gulp-file-include -..

[nunjucks] config.js의 변수를 macro에서 렌더링 되게하기

nunjucksRender가 Gulp의 스트림에서 각 파일을 처리할 때마다 data 옵션으로 전달된 객체를 템플릿의 컨텍스트로 사용하게 된다. 즉, 각 템플릿에서는 data 옵션에 정의된 변수를 직접 참조할 수 있어야 한다. 그러나 여기서 문제가 발생하는 부분은 Nunjucks의 macro가 별도의 scope를 가지고 있어서 macro 밖에서 정의된 변수를 직접 참조하지 못하는 것이다. 이를 해결하기 위해 변수를 macro에 인자로 전달해야 한다. //config.js const config = { local_name: "이름", }; module.exports = config; //gulpfile.js const config = require("./config.js"); function nunjucks..

gulp + nunjucks

gulp + nunjucks를 쓰게 된 계기 구축 프로젝트를 진행하게 되었다. html 산출물이 필요하다. 공통적으로 쓰이는 코드들이 많다. 이것들을 컴포넌트화 해서 어느 페이지에서든 재사용하면 좋지 않을까? pug가 좋다고? > 너무 생소하다. nunjucks 라는게 있네? > 인클루드/컴포넌트/자바스크립트 제어 익숙하다 > 선택 html 산출물이 필요하기 때문에 이를 빌드할 툴이 필요하다. 웹팩을 많이 쓴다고? > html 산출물만을 위해 쓰기엔 너무 무거운데? gulp는 어떨까? > 쉽고 가볍다 > 선택 gulp 셋팅 js, css 파일 minify scss 컴파일 css autoprefixer 라이브 서버 이미지 경량화 babel 빌드된 html 파일 beautify 라이브러리 설치(swiper,..

[gulp] gulp 시작하기

퍼블리셔로 일을 하다보면 마크업이 전부가 아니게 된다. 이것 저것 신경써야 할게 많고, 내 머리에서 나오는게 충분하지 않기 때문에 다양한 사이트의 힘을 빌려야 할때가 많다. 그럼 매번 작업을 하고 수정을 할때마다 똑같은 작업을 반복(예를 들어 css minify나 scss를 css로 변환하던가 하는..)해야 하는 이 번거로움을 어떻게 줄일 수 있을까? gulp를 사용해서 초기에 셋팅을 해놓으면 알아서 변환이 된다. 나도 사용안해봐서 이게 얼마나 편하고 좋은지는 모르겠다. 이제 써봐야지 싶어서(반강제적으로) gulp를 사용하기로 했다. 우선gulp를 작업 환경을 구축해야한다. 1. Node.js 다운받기 10.16.0 LTS를 다운받는다. 나는 react 때문에 미리 다운받았기 때문에 패스~ 2. git ..