[javascript] Gulp를 사용하여 자바스크립트 파일을 동적으로 로딩하는 모듈 시스템을 구축하는 방법

04 Dec 2023

javascript

이번 글에서는 Gulp를 사용하여 동적으로 자바스크립트 파일을 로딩하는 모듈 시스템을 구축하는 방법을 알아보겠습니다. 자바스크립트 모듈 시스템은 웹 애플리케이션의 로딩 속도를 향상시키고 코드를 모듈화하여 관리하기 쉽게 만들어줍니다.

요구사항

Node.js가 설치되어 있어야 합니다.
Gulp가 설치되어 있어야 합니다. (npm install --global gulp-cli로 전역 설치 가능)

모듈 시스템 구성

프로젝트 폴더를 생성하고 package.json 파일을 생성합니다. (npm init 명령어로 초기화 가능)

package.json 파일에 아래의 의존성 모듈을 추가합니다.

"dependencies": {
  "gulp": "^4.0.2",
  "gulp-concat": "^2.6.1",
  "gulp-uglify": "^3.0.2"
}

프로젝트 폴더에 gulpfile.js 파일을 생성합니다.
gulpfile.js 파일에 아래의 내용을 작성합니다. ```javascript const gulp = require(‘gulp’); const concat = require(‘gulp-concat’); const uglify = require(‘gulp-uglify’);

gulp.task(‘scripts’, function() { return gulp.src(‘src/*.js’) // 로딩할 자바스크립트 파일 경로 설정 .pipe(concat(‘bundle.js’)) // 모든 파일을 하나로 합침 .pipe(uglify()) // 파일 압축 .pipe(gulp.dest(‘dist’)); // 결과 파일 저장될 경로 설정 });

gulp.task(‘default’, gulp.series(‘scripts’));

5. `src` 폴더를 생성하고 모든 자바스크립트 파일을 추가합니다.

6. `gulp` 명령어를 실행하여 Gulp를 실행합니다. 이 명령어는 `gulpfile.js`에 작성된 `default` 태스크가 실행됩니다.

7. `dist` 폴더에 `bundle.js`라는 이름의 자바스크립트 파일이 생성될 것입니다. 이 파일을 HTML 파일에서 로딩하면 모듈 시스템이 구성됩니다.

## 모듈 로딩
HTML 파일에서 `bundle.js` 파일을 로딩하여 모듈 시스템을 사용할 수 있습니다. 아래는 예시입니다.
```html
<html>
  <head>
    <script src="dist/bundle.js"></script>
  </head>
  <body>
    <!-- 자바스크립트 코드를 작성하여 모듈을 사용합니다 -->
  </body>
</html>

결론

Gulp를 사용하여 자바스크립트 파일을 동적으로 로딩하는 모듈 시스템을 구축하는 방법에 대해 알아보았습니다. 이를 통해 코드 관리와 웹 애플리케이션의 로딩 속도를 향상시킬 수 있습니다. Gulp를 사용하면 여러 가지 작업을 자동화할 수 있으므로 웹 개발에 많은 도움이 될 것입니다.

요구사항

모듈 시스템 구성

결론

참고 자료