Gulp로 Scss -> Css 컴파일 하기

 

입사 전에는 css 그냥 쓰면 되지.. 왜 굳이 귀찮게 뭘 설치해가면서 scss를 쓰는 거지..라고 생각했는데

어찌어찌해내서 scss로 하다 보니 이제는 css파일로 만들어진 페이지 수정을 맡게 되면 머리가 어질어질..

그래서 개인 프로젝트에도 scss를 사용하는 게 필수가 되어버림

 

하지만 nvm, npm, gulp를 설치하는 것이 가장 큰 장벽 ㅠ.ㅠ

이것만 이겨내면 매우매우매우 편리해진다

 

 

설치 순서는

nvm -> node.js, npm -> gulp

---

우선 nvm

https://github.com/coreybutler/nvm-windows/releases

 

위 링크로 들어가서 nvm-setup 파일을 다운로드하여 설치하면 된다

 

 

설치 확인은

nvm ls

 

버전 변경은

node use 10

저 10 자리에 원하는 버전을 넣어주면 된다

---

node.js는

https://nodejs.org/ko/

여기서 본인의 운영체제에 맞게 설치해주면 된다

 

node -v

npm -v

터미널에 이렇게 입력해서 설치된 버전이 나온다면 끝

---

 

이제 gulp를 설치하고 내가 필요한 각종 모듈을 설치해주면 된다

 

npm install gulp-cli -g

gulp -v

걸프 설치 및 버전 확인

 

 

npm init

그다음은 package.json 설치

 

Is this ok? (yes) 가 나올 때까지 엔터만 눌러주면 됨

 

 

npm install gulp-sass -D
npm install gulp-sourcemaps -D
npm install gulp-rename -D

여러 가지 모듈이 있지만 우선 내가 사용할 건 이 3개

필요에 따라 여러가지 더 추가하여 사용해도 된다

 

 

 

이제 작업 폴더 안에 gulpfile.js를 만들어줘야 한다

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var rename = require("gulp-rename");

gulp.task('sass', function() {
  gulp.src('**/**/scss/*.scss')
		.pipe(sourcemaps.init())
		.pipe(sass({
			outputStyle: 'expanded',
			indentType: 'tab',
			indentWidth: 1
		}).on('error', sass.logError))
		.pipe(sourcemaps.write('./'))
		.pipe(rename(function(file) {
			file.dirname = file.dirname.replace(/scss$/, "css");
		 }))
		.pipe(gulp.dest(''));
});


gulp.task('watch', function() {
  gulp.watch('**/**/scss/**/*.scss', ['sass']);
});

 

폴더 구조는 대강

work
    ㄴ css
    	ㄴ test.css
    ㄴ scss
    	ㄴ test.scss
    ㄴ img
    	ㄴ test.png
    ㄴ js
    	ㄴ test.js
    ㄴ test.html
    ㄴ gulpfile.js
    ㄴ package.json

이런 느낌..

 

 

gulp watch

이 명령어를 터미널에 입력했을 때

Starting 'watch'...
Finished 'watch' after 8.23 s

 

이렇게 나오면 성공!

 

 

한 번에 쭉 정리해보니 되게 간단해 보이는데

왜 이렇게 이게 사람을 괴롭혔는지 모르겠다 ㅠ.ㅠ

 

 

 

+)

Sass --watch scss/파일명.scss:css/파일명.css

gulpfile.js 없이 이렇게 바로 컴파일하는것도 가능하다