반응형 전체 글210 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. 7. Gulp 플러그인 활용 - 1 자주 사용되는 Gulp 플러그인 소개 Gulp 플러그인은 Gulp를 더욱 강력하게 만들어주는 확장 모듈들입니다. 이번 챕터에서는 자주 사용되는 Gulp 플러그인 몇 가지를 소개하고, 간단한 사용 예제를 통해 어떻게 활용할 수 있는지 알아보겠습니다. 1. gulp-uglify: JavaScript 압축 플러그인 JavaScript 파일을 압축하는 데 사용되는 플러그인입니다. 주로 프로덕션 환경에서 코드 최적화를 위해 적용됩니다. npm install gulp-uglify --save-dev const gulp = require('gulp'); const uglify = require('gulp-uglify'); gulp.task('scripts', () => { return gulp.src('src/*.j.. 2023. 12. 31. 6. Gulp의 핵심 개념 - 3 Gulp API 개요 이번 포스팅에서는 Gulp API의 핵심 개념과 기능에 대해 알아보겠습니다. Gulp의 핵심 개념 Task (작업): Gulp에서 Task란 특정한 작업을 수행하는 하나의 함수를 의미합니다. 예를 들어, JavaScript 파일을 압축하는 작업, 이미지를 최적화하는 작업 등이 각각의 Task로 정의될 수 있습니다. Stream (스트림): Gulp에서는 파일 처리를 위해 스트림을 사용합니다. 스트림은 데이터의 흐름을 나타내며, 파일을 읽거나 쓰는 과정에서 중간 단계에서 데이터를 가공하거나 변환할 수 있게 해줍니다. Plugin (플러그인): Gulp에서는 다양한 작업을 수행하기 위해 플러그인을 사용합니다. 플러그인은 주로 스트림 상에서 동작하며, 파일을 가공하거나 특정 작업을 수행하.. 2023. 12. 31. 이전 1 ··· 33 34 35 36 37 38 39 ··· 53 다음 반응형
