gulp-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 명령어로 컴파일 실행