build tool gulp

1. gulp란

코드에서 반복적이고 자주 사용되는 일은 자동화해주는 빌드 툴

생산성에 큰 도움이 되므로 프로젝트 진행시 많이 사용

2. gulp 설치

1	node.js를 설치
2	터미널(cmd) 실행
3	Window	npm install -g npm	npm 최신 버전으로 업그레이드
		npm install -g gulp-cli	vue-cli 설치
	macOS	sudo npm install -g npm	npm 최신 버전으로 업그레이드
		sudo npm install -g gulp-cli	vue-cli 설치
4		gulp init	package.json 생성
5		npm install --save-dev gulp	gulp 모듈 설치
6		npm install --save-dev gulp-(플러그인이름)	플러그인 설치

3. gulpfile.js

gulp 설정이 들어간다.

# gulpfile.js 생성

1) gulp 플러그인 선언

var 플러그인이름 = require('플러그인이름')

2) 플러그인 task 사용

gulp.task(name, [deps], func)

- task : 플러그인 실행

- name : 실행될 task 이름

- deps : 현제 실행될 task 전에 실행될 task [ 'task1이름', 'task2이름']

- func : 현제 task에서 실행될 함수 내용

3) 경로지정 

gulp.src("../test.scss")

4) task 실행 내용

gulp.pipe( ... )

var gulp = require("gulp");

gulp.task("copy", function(){

return gulp.src("src/css/test.css")

.pipe(gulp.dest("src/copy_css/"))

});

5) gulp 실행

# 터미널: gulp task명

gulp copy

4. gulp-sass 플러그인 설치

npm install --save-dev gulp-sass

var gulp = require("gulp");

var sass = require("gulp-sass");

gulp.task("sass", function(){

return gulp.src("src/sass/*.scss")

.pipe(sass())

.pipe(gulp.dest("src/css/"))

});

5. autoprefixer 플러그인 설치

npm install --save-dev gulp-autoprefixer

var gulp = require("gulp");

var sass = require("gulp-sass");

var autoprefixer = require("gulp-autoprefixer");

gulp.task("sass", function(){

return gulp.src("src/sass/*.scss")

.pipe(sass())

.pipe((autoprefixer({browsers: ['last 2 versions'], cascade: false}))

.pipe(gulp.dest("src/css/"))

});

6. gulp 실행시 tip

gulpfile.js 맨밑 줄에 아래 코드 추가

gulp.task("default", ["sass"]);

터미널에 task 명없이 gulp만 쳐도 실행