본문 바로가기
Web/Node.js

gulp-less

by juein 2018. 3. 1.

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

'Web > Node.js' 카테고리의 다른 글

express module - request, response 객체  (0) 2018.03.06
http module (server, request, response, cookie)  (0) 2018.03.02
Node js Email Send  (0) 2018.03.02
Node.js 기본내장모듈  (0) 2018.02.26
forever & nodemon & supervisor  (0) 2018.02.26

댓글