반응형 Gulp와 프론트엔드 개발2 15. Gulp와 프론트엔드 개발 - 2 자바스크립트 번들링 (Browserify, Webpack 등) 프론트엔드 개발에서는 다수의 JavaScript 파일을 효율적으로 관리하고 성능을 최적화하기 위해 자바스크립트 번들링 도구를 사용하는 것이 일반적입니다. 이번 챕터에서는 Gulp.js와 함께 자바스크립트 번들링 도구인 Browserify와 Webpack을 활용하는 방법에 대해 알아보겠습니다. 1. Browserify를 사용한 자바스크립트 번들링 Browserify는 CommonJS 스타일의 모듈을 사용하여 프론트엔드에서 require 함수를 이용해 모듈을 로드할 수 있게 해주는 도구입니다. 먼저 Browserify를 설치합니다. npm install --save-dev gulp browserify vinyl-source-stream 다음으로,.. 2024. 1. 18. 14. Gulp와 프론트엔드 개발 - 1 CSS 전처리기 (Sass, Less) 사용 프론트엔드 개발에서 CSS 전처리기는 스타일 시트 작성을 더 효율적으로 만들어주는 강력한 도구 중 하나입니다. Sass와 Less는 가장 널리 사용되는 CSS 전처리기 중 두 가지입니다. 이번 챕터에서는 Gulp.js를 사용하여 프로젝트에 Sass 또는 Less를 통합하고, 이를 효과적으로 활용하는 방법에 대해 살펴보겠습니다. 1. Gulp에서 Sass 통합하기 먼저, Sass를 Gulp에 통합하는 방법을 알아봅시다. 필요한 패키지를 설치합니다. npm install --save-dev gulp gulp-sass 그리고 Gulp 작업을 설정합니다. const gulp = require('gulp'); const sass = require('gulp-sass').. 2024. 1. 18. 이전 1 다음 반응형
