민즈코드 개발 블로그

browser-sync 이름에서 알 수 있듯이 브라우저를 동기화해주는 프로그램으로 소스파일의 수정이 감지되면 자동으로 브라우저를 새로고침하여 수정된 화면을 볼 수 있다. browser-sync - npm 설치 npm install --save-dev browser-sync 사용 예시 const browserSync = require('browser-sync').create(); // 실행 browserSync.init({ port: 3000, browser: "google chrome", startPath: "index.html", server: { baseDir: "./dist", } }); // 새로고침 browserSync.reload(); gulp-ejs 공통영역 include 또는 간단한 조건문..

src()와 dest() gulp에서는 src()와 dest() 메서드를 사용하여 파일을 읽고 쓴다. src()는 노드 스트림을 생성하고, 인자로 받은 파일 정보(Glob pattern)의 모든 파일을 찾아 메모리로 읽어 스트림으로 보낸다. src()에 의해 생성된 스트림은 signal async completion 을 위해 Task에서 return되어야 한다. const { src, dest } = require("gulp"); exports.default = function () { return src("src/*.js").pipe(dest("output/")); }; 파이프라인(.pipe())으로 연결 스트림의 주요 API는 변환(Transform) 또는 쓰기 가능한(Writable) 스트림을 연결..

비동기 처리 Node.js는 다양한 방식으로 비동기성 처리를 한다. 가장 일반적인 패턴은 error-first callbacks{:target="_blank"}이지만, streams{:target="_blank"}, promises{:target="_blank"}, event emitters{:target="_blank"}, child processes{:target="_blank"}, observables{:target="_blank"} 등도 있다. Node.js를 기반으로 하는 gulp에서도 이러한 비동기성 처리를 사용한다. Task 완료 시그널 gulp에서는 series() 또는 parallel() 메서드를 사용하여 Tasks를 순차 또는 병렬로 실행이 가능하다. 이를 위하여 각 Task의 실행이 ..

Task란? Task는 비동기 JavaScript function이다. gulp 3.x에서는 task로 등록을 해야만 동작을 했다면, gulp 4.x에서는 function으로 작성을 하면 된다. 단, 아래의 6가지 중 하나의 형태를 가져야 한다. stream을 리턴한다. promise를 리턴한다. event emitter를 리턴한다. child process를 리턴한다. observable를 리턴한다. error-first callback을 사용한다. gulp에서 일반적으로는 stream을 리턴하거나 리턴이 없을 경우 error-first callback을 사용한다. 익스포팅(Exporting) Task는 public 또는 private로 간주될 수 있다. Public tasks : gulpfile에서 ..

gulp란? gulp는 Node.js 기반의 프로세스를 자동화하고 향상시키는 도구로, 스스로를 Node의 스트림 기능을 활용하는 스트리밍 빌드 시스템(streaming build system)이라고 말한다. 프로젝트를 Development, Production 등의 다른 빌드 Task를 작성할 수 있다. 예를 들어 Development 빌드는 테스트용 서버를 구동하고, Production 빌드는 소스를 minify를 하는 등 각각의 Task를 작성하여 언제든 원할 때 실행한다. gulp.js : gulpjs.com Node.js 설치 확인 gulp는 Node.js 기반으로 실행되기 때문에 Node.js가 설치되어 있는지 먼저 확인하고, 설치되어 있지 않으면 Node.js에서 Download하여 설치한다...