Gulp를 사용하여 CSS 전처리기인 LESS를 컴파일 해보자
[gulp install]
npm install gulp -g
-g 글로벌 설치는 한번만 하고,
그 후 해당 프로젝트내에서 –save 로package.json 파일에 저장
(package.json이 없으면 npm init으로 프로젝트 등록)
npm install gulp --save
위와 마찬가지로 gulp-less 플러그인도 설치
npm install gulp-less -g
npm install gulp-less --save
[설치 후 package.json의 파일 내용 확인]
"dependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.5.0",
}
[gulpfile.js 파일 생성]
gulp 프로그램은 gulpfule.js를 기본적으로 읽으면서 실행한다. 파일 생성후 모듈로드 및 실행할 내용을 작성
//걸프 의존성을 여기에 작성
var path = require('path');
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('default', function(){
//걸프 작업을 여기에 작성
});
//변경하고싶은 less파일 경로 및 변경 후 파일저장 경로를 지정해준다.
gulp.task('less', function () {
return gulp.src('public/less/**/*.less') // <-- 변경 할 less파일의 위치
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('public/css')); // <-- 변경 후 css파일 저장 경로
});
gulpfule.js 작성 후 gulp less 명령어로 컴파일 실행
파일을 수정 할 때 마다 수동으로 명령어를 넣는 게 귀찮다면
nodemon, supervisor
같은 모듈을 사용 하면 된다.