반응형 gulp.js23 11. 자동화 작업 구성 - 3 Live Reload와 Browser Sync 개발 중인 웹 애플리케이션에서 실시간으로 변경 사항을 확인하고 반영하는 것은 매우 중요합니다. 이를 위해 Live Reload와 Browser Sync와 같은 도구를 사용하여 개발자는 수정한 코드를 브라우저에서 즉시 확인할 수 있습니다. 1. Live Reload란? Live Reload는 소스 코드를 수정하고 저장했을 때 브라우저를 새로 고침하는 도구입니다. Gulp에서는 gulp-livereload 플러그인을 사용하여 Live Reload를 구현할 수 있습니다. npm install --save-dev gulp-livereload 2. Browser Sync 도구 사용 Browser Sync는 더 나아가 여러 브라우저 간에 동기화된 테스팅, 외부 기기에서.. 2024. 1. 18. 10. 자동화 작업 구성 - 2 자동 빌드 (Auto Build) 자동 빌드는 소스 코드가 변경될 때마다 자동으로 빌드 작업을 실행하여 개발자가 수동으로 빌드 명령을 입력하지 않아도 되는 편리한 기능입니다. Gulp를 사용하여 프로젝트에 자동 빌드를 설정하는 방법에 대해 알아보겠습니다. 1. Gulp Watch와 함께 사용 자동 빌드를 설정하려면 먼저 gulp-watch와 같은 감시(Watch) 도구를 사용하여 파일 변경을 감지해야 합니다. Watch는 파일이 변경될 때 특정 작업을 실행하는 Gulp 플러그인 중 하나입니다. npm install --save-dev gulp-watch 2. Watch와 빌드 작업 통합 이제 Watch와 함께 자동 빌드를 설정해봅시다. 아래는 예시로 Sass 파일을 컴파일하는 작업을 자동으로 수행하는 G.. 2024. 1. 18. 9. 자동화 작업 구성 - 1 파일 감시 (Watch) Gulp를 사용하면 파일의 변경을 감지하고 자동으로 특정 작업을 수행하는 등 다양한 자동화 작업을 구성할 수 있습니다. 이번 포스팅에서는 Gulp의 중요한 기능 중 하나인 "파일 감시 (Watch)"에 대해 알아보겠습니다. 1. Gulp Watch 설치 먼저, Gulp의 Watch 기능을 사용하기 위해 gulp-watch 플러그인을 설치합니다. npm install --save-dev gulp-watch 2. Watch 태스크 설정 Gulpfile.js 파일을 열고, Watch 태스크를 설정합니다. const gulp = require('gulp'); const sass = require('gulp-sass'); const watch = require('gulp-watch'); .. 2024. 1. 18. 8. Gulp 플러그인 활용 - 2 플러그인 설정과 활용 예제 Gulp는 강력한 태스크 러너이자 빌드 도구로, 다양한 플러그인을 활용하여 프로젝트의 빌드 및 자동화 작업을 효율적으로 수행할 수 있습니다. 이번 포스팅에서는 Gulp 플러그인을 설정하고 활용하는 예제를 다루겠습니다. 1. Gulp 플러그인 설치 Gulp 플러그인은 npm을 통해 간단하게 설치할 수 있습니다. 예를 들어, 프로젝트에 필요한 기본적인 플러그인인 gulp와 gulp-sass를 설치하는 명령은 다음과 같습니다. npm install --save-dev gulp gulp-sass 2. Gulpfile.js 작성 Gulp의 태스크는 주로 Gulpfile.js 파일에 작성됩니다. 아래는 간단한 Gulpfile.js 예제입니다. const gulp = require('gul.. 2024. 1. 18. 이전 1 2 3 4 5 6 다음 반응형
