Gulp 시작하기 (3) gulp-concat

🥤 gulp-concat

---

concat은 연결하다는 의미로 배열 메소드로도 쓰이는 친구죠. gulp-concat 플러그인도 유사한 의미로 여러 파일들을 하나로 연결(?)해줍니다.

 

var concat =  require('gulp-concat');

gulp.task('scripts',  function()  {
	 return  gulp.src(['./lib/file3.js',  './lib/file1.js',  './lib/file2.js'])
		 .pipe(concat('all.js'))
		 .pipe(gulp.dest('./dist/'));
});

lib 폴더 아래에 있는 자바스크립트 파일 3개를 all 이라는 파일명의 js파일 하나로 합쳐줍니다. 그리고 all.js는 dist 폴더 아래에 위치하겠죠?

그러면 이전 글의 styles task에 concat을 추가해 보겠습니다.

 

Installing

npm i -D gulp-concat

설치합니다.

 

"devDependencies": {
	"gulp": "^4.0.2",
	"gulp-concat": "^2.6.1",
	"gulp-sass": "^4.1.0"
}

package.json에 추가되었겠죠?

 

button.scss 👉🏻 all.css 로 컴파일하기

gulp-concat은 여러 파일들을 합쳐줄 뿐 아니라, 파일명도 변경할 수 있습니다. 현재 우리가 작성한 스타일은 button.scss 하나 뿐입니다.
button.scss를 button.css로 컴파일 했던 것을 all.css 로 변경해 보겠습니다.

 

const  concat = require('gulp-concat');

(...)

function  styles() {
	return  src(paths.css.src, { sourcemaps:  true })
		.pipe(sass(options.scss).on('error', sass.logError))
		.pipe(concat('all.css')) // <<<- 이렇게 추가^^
		.pipe(dest(paths.css.dest, { sourcemaps:  true }))
}

 

일전에 컴파일됬던 button.css 파일을 삭제하고, 터미널에 gulp style 명령어를 실행합니다. 정상 결과는 dist/css/all.css 가 생성됩니다.
만약 CSS 코드를 축소시켜주는 플러그인을 끼고 한다면 all.min.css 로 컴파일할 수도 있겠죠.

 

여러 scss 파일을 하나로 컴파일해야 한다면?

실제 프로젝트에서는 보통 scss를 컴포넌트 별로 분리해서 작업하겠죠? scss 파일들을 더 추가해 보겠습니다.

 

.input {
	width: 100%;
	height: 36px;
	padding: 3px  5px;
}

src/scss/input.css 추가해서 간략하게 작성하고 gulp style 실행!

그러면 버튼과 인풋 코드들이 all.css 하나로 합쳐진 것을 볼 수 있습니다.
이것은 처음부터 와일드카드 문자로 경로로 설정해놨기 때문입니다.

src: ‘./src/scss/*.scss’,

 

src: [
	'./src/scss/button.scss',
	'./src/scss/input.scss'
]

와일드카드 문자를 사용하지 않는다면 이렇게 작성해야겠죠?ㅎㅎ

부트스트랩을 기반해서 하는 등 스타일 디렉토리가 복잡해질 수도 있습니다. 그럴 경우엔 어떻게 구성하는 지는 플러그인들 기초 설명 글을 끝내고 올려 보겠습니다.

 

Completed Code

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

const sass = require('gulp-sass');
const concat = require('gulp-concat');

const paths = {
  css: {
    src: './src/scss/*.scss',
    dest: './dist/css'
  }
}

const options = {
  scss: {
    outputStyle: 'expanded',
    sourceComments: false
  }
}

function styles() {
  return src(paths.css.src, { sourcemaps: true })
    .pipe(sass(options.scss).on('error', sass.logError))
    .pipe(concat('all.css'))
    .pipe(dest(paths.css.dest, { sourcemaps: true }))
}

exports.style = styles;