반응형 Watch 모드에 통합3 16. Gulp와 백엔드 개발 - 1 서버 실행과 통합 웹 개발 프로젝트에서는 프론트엔드와 백엔드 간의 협업이 중요합니다. 이번 챕터에서는 Gulp를 사용하여 서버를 실행하고, 프론트엔드와 백엔드 작업을 효과적으로 통합하는 방법에 대해 알아보겠습니다. 1. 서버 실행을 위한 Gulp 작업 설정 웹 개발에서는 프론트엔드와 백엔드를 함께 개발해야 할 때가 많습니다. 이를 위해 Gulp를 사용하여 백엔드 서버를 실행하는 작업을 설정해봅시다. const gulp = require('gulp'); const nodemon = require('gulp-nodemon'); gulp.task('start-server', function () { nodemon({ script: 'server.js', // 서버 진입 파일 ext: 'js html', // .. 2024. 1. 18. 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 다음 반응형
