초보자를 위한 Gulp 4 튜토리얼(Sass 및 JS 워크플로)

Gulp 4에 대한 이 자습서에서는 Sass 및 JavaScript 파일을 컴파일하기 위해 워크플로에서 Gulp를 설정하는 방법을 단계별로 설명합니다.

아직 Gulp를 사용하지 않았다면 한 번 확인하는 것이 좋습니다! Gulp를 사용하여 Sass 파일을 CSS로 컴파일, JavaScript 파일 처리, 파일 최적화와 같은 많은 유용한 작업을 실행할 수 있습니다.

이 튜토리얼에서 다룰 Gulp를 설치하고 실행하는 기본 단계는 다음과 같습니다.

npm install gulp-cli -g를 실행하여 명령줄에 gulp-cli를 설치합니다. .
npm install gulp를 실행하여 Gulp 설치 .
Gulp 워크플로를 위한 다른 npm 패키지를 설치합니다.
gulpfile.js 생성 프로젝트 루트에 있는 파일입니다.
npm 패키지를 gulpfile의 모듈로 가져옵니다.
작업을 gulpfile에 추가하여 SCSS/JS 파일을 컴파일하고 감시 작업을 실행합니다.
gulp 실행 모든 작업을 실행하는 명령입니다.

걸프란 무엇이며 어떤 역할을 합니까?

Gulp는 웹 개발 워크플로에서 다양한 작업을 실행하는 도구입니다. 번들러, 빌드 도구 또는 태스크 러너라고 부를 수 있습니다. 비슷한 도구는 Webpack과 Grunt입니다(Grunt는 빠르게 구식이 되고 있지만).

Gulp가 우리를 위해 할 일은 다음과 같습니다.

Sass 파일을 CSS로 컴파일
CSS에 공급업체 접두사 추가
최종 CSS 파일 축소
JS 파일 연결(즉, 결합)
최종 JS 파일 미화
최종 CSS/JS 파일을 /dist로 이동 폴더.

꽤 멋지죠?!

작동 방식은 모든 설정과 작업이 gulpfile.js에 저장된다는 것입니다. 파일. 그리고 명령줄에서 Gulp를 실행합니다.

이것의 가장 큰 장점은 gulpfile이 모두 설정되면 다른 프로젝트에 쉽게 재사용할 수 있다는 것입니다. 따라서 시간을 크게 절약할 수 있습니다!

컴퓨터에 Gulp를 설치하고 설정하는 방법을 알아보겠습니다.

Gulp 4 설치 방법

Gulp를 실행하기 전에 몇 가지를 설치해야 합니다.

Node.js가 아직 없다면 설치하세요.
npm install --global gulp-cli를 실행하여 Gulp 명령줄 유틸리티를 설치합니다. .

Gulp가 작동하면 Gulp를 사용하여 구축한 데모 프로젝트를 확인하십시오!

간단한 프론트엔드 웹사이트를 빠르게 시작할 수 있는 프론트엔드 상용구 프로젝트입니다.

(나 또한 이 튜토리얼의 나머지 부분에 많은 코드 스니펫이 있으므로 참조할 수 있습니다!)

프런트 엔드 상용구 프로젝트를 설정하려면:

이 프로젝트의 Git 저장소를 컴퓨터에 복제하거나 다운로드합니다.
프로젝트를 열고 루트 프로젝트 폴더에서 명령줄로 이동하여 npm install을 실행합니다. . 그러면 package.json에 나열된 npm 패키지가 설치됩니다. 파일, 특히 Gulp 4.

이제 프로젝트 파일을 설정하고 Gulp 작업을 실행하는 데 사용할 모든 npm 패키지를 설치해야 합니다.

저장소의 파일이 준비되었으므로 gulp를 입력하면 명령줄에 다음과 같은 출력이 표시되어야 합니다.

> gulp
[22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js
[22:29:48] Starting 'default'...
[22:29:48] Starting 'scssTask'...
[22:29:48] Starting 'cacheBustTask'...
[22:29:48] Finished 'cacheBustTask' after 39 ms
[22:29:48] Starting 'jsTask'...
[22:29:48] Finished 'jsTask' after 340 ms
[22:29:48] Finished 'scssTask' after 347 ms
[22:29:48] Starting 'watchTask'...

Gulp를 실행했습니다!

Gulp를 실행하면 프로젝트에서 어떤 일이 벌어지나요?

좋습니다. 프로젝트가 성공적으로 진행되었습니다! 이제 프로젝트의 내용과 작동 방식에 대해 자세히 알아보겠습니다.

먼저 프로젝트의 파일 구조에 대한 간략한 설명입니다.

index.html — 기본 HTML 파일
패키지.json — npm install을 실행할 때 설치할 모든 npm 패키지를 포함합니다. .
gulpfile.js — 구성을 포함하고 모든 Gulp 작업을 실행합니다.
/앱 — 작업 폴더, 여기에서 SCSS/JS 파일을 편집합니다.
/dist — Gulp는 여기에 파일을 출력합니다. 이 파일을 편집하지 마십시오.

워크플로에서 HTML, SCSS 및 JS 파일을 편집합니다. 그런 다음 Gulp는 변경 사항을 감지하고 모든 것을 컴파일합니다. 그런 다음 /dist에서 최종 CSS/JS 파일을 로드합니다. index.html 폴더 파일.

이제 Gulp가 실행되었으므로 Gulp가 어떻게 작동하는지 자세히 살펴보겠습니다.

gulpfile.js에 정확히 무엇이 있습니까?

gulpfile의 각 섹션과 그 역할에 대한 자세한 설명은 다음과 같습니다.

1단계:npm 모듈 초기화

gulpfile.js 맨 위에 , require()를 사용하여 이전에 설치한 npm 패키지를 가져오는 많은 상수가 있습니다. 기능.

패키지의 기능은 다음과 같습니다.

꿀꺽 패키지:

gulp — gulpfile.js의 모든 것을 실행합니다. src와 같이 사용할 특정 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽꿀꺽 꿀꺽 꿀꺽꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽꿀꺽 마시고 , dest , watch , 다른 사람. 이를 통해 gulp 없이 해당 함수를 직접 호출할 수 있습니다. , 예를 들어 src()를 입력하면 됩니다. gulp.src() 대신 .

CSS 패키지:

gulp-sourcemaps — CSS 스타일을 브라우저 개발 도구의 원본 SCSS 파일에 다시 매핑합니다.
gulp-sass — SCSS를 CSS로 컴파일
gulp-postcss — autoprefixer 및 cssnano 실행(아래 참조)
autoprefixer — CSS에 공급업체 접두사 추가
cssnano — CSS 축소

JS 패키지:

gulp-concat — 여러 JS 파일을 하나의 파일로 연결
gulp-uglify — JS 축소

또한 index.html의 CSS 및 JS 파일 참조에서 일부 캐시 버스팅을 수행하기 위해 문자열 교체를 사용하고 있습니다. 이렇게 하면 파일을 변경할 때 웹사이트에서 해당 파일의 최신 복사본을 로드할 수 있습니다.

문자열 교체 패키지:

gulp-replace — 캐시 버스트에 대한 CSS/JS 참조에 문자열 매개변수 추가

이제 모듈을 추가했으므로 작동하도록 합시다!

2단계:모듈을 사용하여 Gulp 작업 실행

Gulp에서 "작업"은 기본적으로 특정 목적을 수행하는 기능입니다.

SCSS 및 JS 파일을 컴파일하고 이러한 파일의 변경 사항을 감시하기 위해 몇 가지 유틸리티 작업을 만들고 있습니다. 그런 다음 이러한 유틸리티 작업은 gulp를 입력할 때 기본 Gulp 작업에서 실행됩니다. 명령줄에서.

파일 경로에 대한 상수 만들기

하지만 작업을 작성하기 전에 파일 경로를 상수로 저장하는 몇 줄의 코드가 있습니다. 이것은 선택 사항이지만 매번 수동으로 다시 입력할 필요가 없도록 경로 변수를 사용하는 것이 좋습니다.

이 코드는 scssPath를 생성합니다. 및 jsPath Gulp에 파일이 있는 위치를 알려주는 데 사용할 상수입니다.

Sass 작업

Sass 작업에 대한 코드는 다음과 같습니다.

function scssTask(){    
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

scssTask()라는 Sass 작업 은(는) 여러 가지 일을 하고 있습니다. Gulp에서는 Gulp 함수 pipe()를 사용하여 여러 함수를 연결할 수 있습니다. 첫 번째 기능 이후.

우리 작업에서 Gulp는 먼저 src()를 실행합니다. SCSS 파일의 소스 디렉토리를 로드합니다. 앞에서 만든 상수인 files.scssPath를 사용하고 있습니다. .

그런 다음 src() 뒤에 우리는 다른 모든 것을 빌드 프로세스에 연결하고 있습니다. 기존 파이프에 점점 더 많은 파이프 섹션을 추가하는 것과 같이 생각할 수 있습니다.

실행 중인 기능은 다음과 같습니다.

sourcemaps.init() — src() 다음에 소스맵을 먼저 추가해야 합니다.
sass() 모든 SCSS 파일을 하나의 CSS 파일로 컴파일합니다.
postcss() 두 개의 다른 플러그인을 실행합니다:
- autoprefixer() CSS에 공급업체 접두사 추가
- cssnano() CSS 파일 축소
sourcemaps.write() 동일한 디렉토리에 소스맵 파일을 생성합니다.
dest() Gulp에게 최종 CSS 파일과 CSS 소스맵 파일을 /dist에 넣도록 지시합니다. 폴더.

JS 작업

다음은 JS 파일을 컴파일하는 작업에 대한 코드입니다.

function jsTask(){
    return src([files.jsPath])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

jsTask()라는 JavaScript 작업 , 여러 기능도 실행 중입니다.

src() files.jsPath에서 JS 파일을 로드하려면 .
concat() 모든 JS 파일을 하나의 JS 파일로 연결합니다.
uglify() JS 파일을 축소/축소합니다.
dest() 최종 JS 파일을 /dist로 이동 폴더.

캐시 무효화 작업

다음은 캐시 버스트 작업에 대한 코드입니다.

var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/, 'cb=' + cbString))
        .pipe(dest('.'));
}

index.html 파일에서 CSS 및 JS 파일에 대해 다음 참조를 사용하고 있습니다.

<link rel="stylesheet" href="dist/style.css?cb=123">

<script src="dist/all.js?cb=123"></script>

캐시 버스트가 유용한 이유는 브라우저와 웹 호스트 서버가 CSS 및 JS 파일과 같은 자산 파일의 복사본을 캐시하거나 저장하기 때문입니다. 따라서 동일한 페이지를 다시 로드할 때 브라우저가 서버에서 다시 다운로드할 필요 없이 로컬에 캐시된 사본을 로드하는 것이 더 빠릅니다.

문제는 때때로 이전에 저장된 버전을 로드하고 싶지 않다는 것입니다. CSS 또는 JS 파일을 변경하고 서버에 재배포할 때 사람들이 해당 파일을 다시 다운로드하도록 하고 싶을 것입니다.

따라서 강제로 다시 다운로드하는 한 가지 방법은 약간의 쿼리 문자열을 추가하는 것입니다.
?cb=123 해당 파일 참조의 끝까지. 브라우저가 페이지를 다시 로드하고 쿼리 문자열이 지난번과 다르면 파일을 새로 고칩니다.

Gulp replace()를 사용하고 있습니다. "cb=" 및 임의의 숫자를 포함하는 문자열을 찾는 함수입니다. 그리고 그 숫자를 1970년 이후 밀리초로 변환된 현재 시간으로 구성된 새 숫자로 바꾸십시오.

그렇게 하면 Gulp가 실행될 때마다 쿼리 문자열이 달라지고 새 CSS 및 JS 파일이 사용자의 브라우저에 로드되는지 확인할 수 있습니다.

걸프 w작업

꿀꺽 삼키기 watch() 기능은 매우 유용한 기능입니다. 실행하면 파일이 변경 사항을 감지하도록 감시하면서 지속적으로 실행됩니다. 변경 사항을 감지하면 사용자가 지시한 여러 작업을 실행합니다.

gulp를 수동으로 계속 실행할 필요가 없기 때문에 이것은 훌륭합니다. 모든 코드 변경 후.

다음은 Gulp 보기 작업 예제 코드입니다.

function watchTask(){
    watch(
        [files.scssPath, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

watch() 함수는 세 개의 매개변수를 사용하지만 두 개만 사용합니다.

globs, 파일 경로 문자열을 의미
옵션(사용되지 않음) 및
작업, 실행하려는 작업을 의미합니다.

감시 작업이 하는 일은 scssPath의 파일을 감시하는 것입니다. 및 jsPath 디렉토리. 그런 다음 둘 중 하나에서 변경 사항이 있으면 scssTask를 실행합니다. 및 jsTask 동시에 작업을 수행합니다.

이제 유틸리티 작업을 설정했으므로 기본 Gulp 작업을 설정해야 합니다.

기본 Gulp 작업

이것은 gulp를 입력하면 자동으로 실행되는 주요 Gulp 작업입니다. 명령줄에서.

exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask);

Gulp는 자동으로 default를 검색합니다. gulpfile.js의 작업 gulp를 사용할 때 명령. 따라서 작동하려면 기본 작업을 내보내야 합니다.

기본 작업은 다음을 수행합니다.

scssTask 실행 및 jsTask parallel()을 동시에 사용
그런 다음 watchTask를 실행합니다.

또한 이러한 모든 작업을 series() 안에 넣는 것을 알 수 있습니다. 기능.

이것은 작업을 처리하는 방법에 대한 Gulp 4의 주요 새 변경 사항 중 하나입니다. 모든 작업(단일 작업도 포함)을 series()로 래핑해야 합니다. 또는 parallel() .

Gulp 4의 변경 사항

tasks()를 사용한 경우 모든 것을 실행하는 기능, 이제 차이점이 있음을 눈치채셨을 것입니다.

gulp.task()를 사용하는 대신 모든 작업 기능을 포함하기 위해 scssTask()와 같은 실제 기능을 만들고 있습니다. 및 watchTask() .

이것은 작업 생성에 대한 Gulp의 공식 지침을 따르기 위한 것입니다.

Gulp 팀은 exports 사용을 권장합니다. tasks()보다는 :

따라서 여전히 task()를 사용할 수 있지만 함수, 각 작업에 대한 JS 함수를 만든 다음 내보내는 것이 더 최신입니다. 가능하다면 Gulp가 task()를 더 이상 사용하지 않을 수 있으므로 이를 반영하도록 구문을 업데이트하는 것이 좋습니다. 어느 순간.

Gulp 3에서 마이그레이션하는 데 문제가 있습니까?

Gulp 3를 사용 중이고 Gulp 4에서 작동하는 기능을 원하는 것이 전부라면 운이 좋은 것입니다!

주요 주요 변경 사항은 작업 실행 방법과 관련이 있습니다.

Gulp 4는 작업을 실행하는 두 가지 새로운 기능을 도입했습니다. series() 및 parallel() . 여러 작업을 동시에 또는 차례로 실행할 수 있는 옵션을 제공합니다.

이전에는 Gulp 3에서 단순히 단일 함수 또는 여러 함수를 배열에 나열할 수 있었습니다. 그러나 Gulp 4에서는 series() 또는 parallel() 지금 오류가 발생합니다.

다음과 같은 것:

AssertionError [ERR_ASSERTION]: Task function must be specified

신속하게 해결할 수 있는 방법은 다음과 같습니다.

(이전) Gulp 3 구문의 작업

Gulp 3에서는 다음과 같이 작업을 실행했을 수 있습니다.

gulp.task('default', ['sass', 'js', 'watch']);
gulp.watch('app/scss/*.scss', ['sass']);

Gulp 4 구문의 작업

이러한 작업을 다음과 같이 series() 함수에 넣습니다.

gulp.task('default', gulp.series('sass', 'js', 'watch'));
gulp.watch('app/scss/*.scss', gulp.series('sass'));

그리고 그것은 가능한 가장 작은 변경으로 작업 기능 오류를 수정합니다! 🙂

프로젝트 파일 다운로드

여기에 표시한 모든 코드는 프론트 엔드 상용구에 대한 GitHub 리포지토리에서 가져온 것입니다. 간단한 프런트 엔드 웹 사이트 프로젝트를 위한 빠른 시작 키트입니다.

확인하고 맞춤설정하고 자신의 프로젝트에 사용할 수 있습니다!

여기에서 GitHub 리포지토리를 확인하세요.