-
Javascript, jQuery 2020‧07‧12
gulp (4 버전이상) 설정 및 사용 (feat. sass,localhost)
오래 전에 gulp 관련 포스팅을 하고 그 글을 보고 다시 한번 사용해 보려고 진행하는 데 달라진 점이 몇개 있어서 그냥 새로 공부한다 생각하고 플로그인 설치 및 사용을 정리해 보았다. 일단 gulp 부터 설치하자 이어서 사용할 플러그인들을 설치하자 gulp-uglify : js 압축 gulp-sass : SCSS 컴파일 gulp-minify-css : css 압축 del : 파일 삭제, browser-sync : […]
-
Javascript, jQuery, Reactjs 2017‧05‧18
Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기
모듈 설치 npm install --save-dev style-loader css-loader sass-loader node-sass cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자. 이제 아래 두가지 방식 중 선택하여 작업한다. 1. .css 파일을 뽑아내지 않고 React에 담는 방식 2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel="stylesheet" ... > 태그로 흔히 우리가 기본적으로 사용하는 그 방법) 1번 방식은 […]
-
Tools 2017‧04‧11
Gulp - 플러그인 설치 및 사용하기
gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자. 내가 하려는 자동화 작업은 이렇다. js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다. scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다. html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다. localhost로 서버화 시켜서 웹브라우져에서 미리 보면서 작업하고 수정될 때마다 실시간 반영된다. 이미지는 압축과정을 거쳐 배포 […]
-
Tools 2017‧04‧11
Gulp - 시작전 준비하기
어제 Gulp(걸프)란 걸 접하고 구글링을 통해서 습득해보는 도중 적어놔야겠다 생각 들어서 정리를 해보려고 한다. (왼쪽은 Gulp 로고라고 하니 알아두자) Gulp는 처음 접하였고 Grunt도 들어는 보았지만 아직 해보진 않았다. 결론은 셋팅해두면 실무에 작업 하는데 도움이 되는 좋은 '자동 빌드 도구'이다. 본인은 이미 비슷한 도구로 GUI형식의 Prepros를 써왔다. 무료다. 다만 유료로 사용하라고 자꾸 뜨는게 귀찮지만 나름 scss도 […]