들어가며
1. 'gulp-ruby-sass' 모듈로 변환하기
window키 + R 을 누르고 cmd
를 입력하여 command
창을 띄우고 아래 명령어를 입력하여 gulp-ruby-sass
모듈을 설치한다.
npm install --save-dev gulp-ruby-sass
제대로 설치가 완료되었다면 package.json
파일에 의존성 주입이 되었을 것이다.
모듈설치 후 package.json에 의존성주입이 된 모습
이제 gulpfile.js
로 돌아가서 아래 코드를 추가하자.
1 | var sass = require('gulp-ruby-sass'); | cs |
위 코드로 sass를 css로 변환하기 위한 모듈을 불러온다. 우리가 방금 설치한 것이 그것이다.
그리고 작업해야할 task를 만들어주자.
1 2 3 4 5 6 7 | gulp.task('sass',function(){ return sass('./css/*.scss') .on('error',function(err){ console.error('Error!',err.message); }) .pipe(gulp.dest('./css')); }); | cs |
sass 란 task를 만들었고 return 값을 보면 css폴더에 속한 모든 scss 파일들을 css파일로 변환할 것이고 변환된 css파일은 css폴더 밑에 위치시킬것이다.
자 이제 코드도 입력하였으니 변환해 보도록하자.
command
창에서 아래 명령어를 입력하자.
gulp sass
성공적으로 변환이 되었다!
성공적으로 변환이 되었다.. 과연 그 결과는??
보이는가? 컬러풀하면서 깔끔하게 정리가 되었다.
2. watch를 이용해서 변경사항 바로 적용하기
역시 gulpfile.js
에서 작업할 것이다.
gulpfile.js
에 아래코드를 추가한다.
1 2 3 4 | gulp.task('sass:watch',function(){ gulp.watch('./css/*.scss',['sass']); }); | cs |
css폴더 밑에 있는 모든 scss를 지켜보다가 변경사항이 생기면 컴파일해준다. I'll watching you...
command
창에서 실행시켜야 지켜본다.
3. 변환과 watch를 한번에 하기
위 방식대로 하면 2번의 작업을 해야한다.
변환하기 한번, 지켜보기 한번.
이 작업을 모아서 gulp의 기본작업으로 정의하고 따로 task를 만들어 보자.
1 | gulp.task('default',['sass','sass:watch']); | cs |
default 라는 task 를 만들어서 그 안에 변환하기task( sass )와 지켜보기task ( sass:watch )를 넣어주자.
그러면 default 라는 task만 실행시켜도 2가지가 한번에 실행된다.
gulp default
sass변환과 watch를 한번에?!
마치며
sass변환과 watch외에도 필요한 기능들을 넣어서 default task에 넣어준다면 손쉽게 기본셋팅이 가능하다.
지금까지 작업한 gulpfile.js
를 올리며 글을 마친다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 'use strict'; var gulp = require('gulp'); var sass = require('gulp-ruby-sass'); gulp.task('default',['sass','sass:watch']); gulp.task('sass',function(){ return sass('./css/*.scss') .on('error',function(err){ console.error('Error!',err.message); }) .pipe(gulp.dest('./css')); }); gulp.task('sass:watch',function(){ gulp.watch('./css/*.scss',['sass']); }); | cs |
'개발도구 > Gulp' 카테고리의 다른 글
Gulp설치 및 기본설정 (0) | 2016.07.07 |
---|