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 이해 못 하므로 require 로 불러옴

const scss = () =>
	gulp
		.src(routes.sass.src)
		.pipe(sass().on("error", sass.logError))
		.pipe(gulp.dest(routes.sass.dest));

•  중간 파이프는 에러를 구체화 시켜서 디버그에 도움 줌

---

gulp-autoprefixer

const scss = () =>
	gulp
		.src(routes.sass.src)
		.pipe(sass().on("error", sass.logError))
		.pipe(autoprefixer({cascade: false,}))
		.pipe(gulp.dest(routes.sass.dest));

• scss => css 변환을 마친 뒤에 호환성을 맞추기 위한 pipe 추가

---

gulp-csso

const scss = () =>
	gulp
		.src(routes.sass.src)
		.pipe(sass().on("error", sass.logError))
		.pipe(autoprefixer({cascade: false,}))
		.pipe(csso())
		.pipe(gulp.dest(routes.sass.dest));​

• gulp.dest 하기 전에 csso pipe 추가