티스토리 뷰

728x90
반응형

한동안 앵귤러를 하다보니 gulp를 손수 손댈 일이 없었는데 갑자기 gulp로 환경을 만들려하니 삽질?을 했다.


버전도 gulp4.0인 줄 이제서야 알았고 ㅠㅠ 

gulp.task메서드말고 gulp.series를 쓰는 것도 이제야 알게 되었다. 

아직까지 pipe는 사용되고 있어서 다행..

근데 es6는 사용하려면 babel을 써야 하는데....

예전 방식처럼 설치했더니 버전 바뀌어서 에러 뿜뿜~


암튼 초기 npm 설정부터 다시 정리해 본다. 



1. 초기 설정. (해당 프로젝트 폴더로 터미널경로를 이동되어 있어야 한다)

매 프로젝트마다 저 선언은 해주어야 package.json 이 생성된다. ( npm에 의한 프로젝트 의존성 모듈 설정 파일 )

npm init


2. gulp 전역(global)설치

npm install -g gulp


3. 프로젝트내 local gulp devDependency 설치

npm install --save-dev gulp


4. gulpfile.babel.js 생성

touch gulpfile.babel.js


5. Babel  설치( ES2015 + 기능 및 호환성 문제를 피하기 위해) 

npm install --save-dev @babel/register @babel/core @babel/preset-env


6. babel 설정파일 .babelrc 을 생성

touch .babelrc


7. .babelrc 파일을 열고 아래 내용을 입력.

{
"presets": [ "@babel/preset-env" ]
}


아래는 https://github.com/gulpjs/gulp 에서 제공하는 gulpfile.babel.js 샘플 코드이다.

import gulp from 'gulp';
import less from 'gulp-less';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import del from 'del';

const paths = {
styles: {
src: 'src/styles/**/*.less',
dest: 'assets/styles/'
},
scripts: {
src: 'src/scripts/**/*.js',
dest: 'assets/scripts/'
}
};

/*
* For small tasks you can export arrow functions
*/
export const clean = () => del([ 'assets' ]);

/*
* You can also declare named functions and export them as tasks
*/
export function styles() {
return gulp.src(paths.styles.src)
.pipe(less())
.pipe(cleanCSS())
// pass in options to the stream
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}

export function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}

/*
* You could even use `export as` to rename exported tasks
*/
function watchFiles() {
gulp.watch(paths.scripts.src, scripts);
gulp.watch(paths.styles.src, styles);
}
export { watchFiles as watch };

const build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
* Export a default task
*/
export default build;



아래는 gulp 에서 자주 쓰는 메서드를 정리해 봤다.


1. gulp.src(globs, [options] )


"지정한 glob 또는 glob 배열을 통해 파일을 표현한다

vinyl의  스트림을 반환하며 pipe 메서드를 통해 플러그인을 사용할 수 있다."

 

globs : String 또는 Array 읽어들일 glob 또는 glob 배열

options : Object glob-stream을 통해 node-glob에 전달할 옵션

gulp는 node-glob와 glob-stream에서 지원하는 옵션 외에도 추가 옵션을 제공 -> 관련 api https://gulpjs.com/docs/en/api/src


사용예시)

const { src, dest } = require('gulp');
function copy() {
return src('input/*.js')
.pipe(dest('output/'));
}
exports.copy = copy;


소스맵(sourcemaps) 제공

- 압축된 소스에 원래 소스를 찾아볼 수 있게끔 제공.

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');

src('input/**/*.js', { sourcemaps: true })
.pipe(uglify())
.pipe(dest('output/', { sourcemaps: true }));


2. gulp.dest(directory, [options])


"파이프된 스트림을 파일로 변환이 작업이 수행된 이후에도 계속해서 

스트림을 반환하므로 여러 폴더에 대해 작업을 할 수도 있다."


directory String 또는 function - 파일을 쓸 경로를 지정한다.

함수가 사용되면 함수는 각 Vinyl 객체와 함께 호출되며 문자열 디렉토리 경로를 반환해야 한다.

지정한 폴더가 없으면 새로 생성. 파일의 저장 경로는 지정한 목적지 경로에 파일 상대 경로를 추가하여 연산. 

차례로 파일의 상대 경로는 파일 base를 기반으로 연산. 


options : Object

options.cwd: 타입 String 

결과물을 출력할 cwd 폴더를 지정.  출력 폴더가 상대 경로일 경우에만 작동한다.  

관련 api ->https://gulpjs.com/docs/en/api/dest


사용예시)

const { src, dest } = require('gulp');

function copy() {
return src('input/*.js')
.pipe(dest('output/'));
}

exports.copy = copy;


3. gulp.series(...tasks)


"작업 기능 및 구성된 작업을 순차적으로 실행. 하나의 큰 그룹 작업으로 결합한다."


...tasks: function or string

const { series, parallel } = require('gulp');

function clean(cb) {
// body omitted
cb();
}

function css(cb) {
// body omitted
cb();
}

function javascript(cb) {
// body omitted
cb();
}

exports.build = series(clean, parallel(css, javascript));



4. gulp.parallel()


"작업 기능 및 구성된 작업을 동시에 실행."


- 구성된 작업이 실행되면 모든 작업이 최대 동시성으로 실행된다. 

한 테스크에서 오류가 발생하면 다른 테스크가 비 결정적으로 완료되거나 완료되지 않을 수 있다.




728x90
반응형

'Programming language > javascript' 카테고리의 다른 글

html2canvas.js를 이용한 화면 캡쳐  (0) 2019.04.24
Async/Await 사용법  (0) 2019.04.12
Array/Object Method  (0) 2019.02.27
typescript 노트  (0) 2019.01.30
chance( 더미 텍스트 및 helper 라이브러리 )  (0) 2019.01.29
댓글