🥤 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 폴더 아래에 위치하겠죠? 그러면 이전 글의 s..
Gulp 4.* 버전 기준으로 설명합니다. 이번에는CSS의 전처리기(CSS Preprocessor)인 SCSS로 스타일을 작성하여 CSS로 컴파일하는 작업을 위한 테스크를 작성합니다. SCSS, SASS, LESS가 무엇인지 알고 싶다면? 바로가기 🥤 gulp-sass 설치하기 npm -D gulp-sass gulp-sass 플러그인을 설치해 줍니다. 개발자도구에서 sass 라인을 알려주는 소스맵 플러그인도 별도로 설치했어야 했는데, 걸프가 업데이트되면서 기본 지원합니다. 그만큼 사용자들이 많았나 봅니다 👍 이전 글에서도 말했듯이 --save는 작성하지 않으셔도 됩니다. "devDependencies": { "gulp": "^4.0.2", "gulp-sass": "^4.1.0" } 설치가 잘 되었다면 p..
Gulp는 node.js 기반으로 개발 프로세스를 자동화시켜 업무 시간 단축에 도움을 주는 도구_task runner_입니다. SCSS를 CSS로 변환할 수 있고, HTML로 작성된 UI를 컴포넌트화 하여 인클루드 할 수도 있습니다. 빌드 도구, 테스크 러너하면 webpack이 제일 많이 알려져 있죠? 많이 사용되는 webpack으로도 작업 할 수 있지만 걸프는 비교적 배우기 쉽고, 무겁지 않습니다. 정적인 화면 작업만 한다면 걸프도 충분합니다. 처음에 저는 gulp와 grunt 중에 무엇을 쓸까 고민하다가 더 대중화된 gulp를 사용했습니다. 걸프 폴더구조 설치할 경로에 폴더를 생성해줘야 합니다. project 폴더를 만들고 그 하위에 추가 폴더를 생성합니다. 저는 gulp-tutorial 폴더 밑에 ..
