Gulp 4 + Browsersync + Sass에 대한 빠른 설정

이 자습서에서는 기본 프런트 엔드 워크플로에서 Gulp를 사용하여 Browsersync를 설정하는 방법을 안내합니다.

우리는 HTML, Sass 및 JavaScript 파일로 작업하고 이 멋진 shmancy 웹사이트를 만들 것입니다! 😄

Browsersync는 웹사이트를 실시간으로 테스트할 수 있는 강력한 도구입니다. 로컬 서버를 가동하고 브라우저와 동기화하여 작동합니다.

그런 다음 코드나 파일을 변경할 때마다 브라우저를 다시 로드하여 즉시 업데이트합니다.

Browsersync를 사용하면 더 빠르고 효율적으로 코딩할 수 있습니다. 모든 웹 개발자가 사용법을 알아야 하는 매우 유용한 도구입니다.

참고: Gulp에 이미 익숙하고 gulpfile에 추가할 Browsersync 코드를 찾고 있다면 여기를 클릭하여 Browsersync 섹션으로 이동하십시오.

프로젝트 설정

이 튜토리얼과 함께 코딩하고 싶으십니까? 이 프로젝트의 모든 시작 파일이 포함된 GitHub 리포지토리를 만들었습니다.

GitHub 리포지토리를 복제하거나 다운로드하고 좋아하는 코드 편집기에서 폴더를 엽니다(개인적으로 VS Code를 좋아합니다).

다음은 프로젝트 구조와 우리가 보유한 파일 유형에 대한 요약입니다.

[gulp-browsersync]
  |-- [app]
        |-- [js]
              |-- script.js
        |-- [scss]
              |-- style.scss
  |-- [dist]
  |-- [img]
  |-- gulpfile.js
  |-- index.html
  |-- package-lock.json
  |-- package.json
 

프로젝트 루트에는 index.html이 있습니다. , package.json , package-lock.json 및 gulpfile.js 파일.

app 폴더도 있습니다. , dist 및 img .

app에서 폴더에는 js가 있습니다. script.js가 포함된 하위 폴더 파일.

그리고 scss가 있습니다. style.scss가 있는 하위 폴더 파일. 여기에서는 단일 JavaScript 및 SCSS 파일로 최소한의 작업을 수행합니다.

dist 폴더는 컴파일된 CSS 및 JavaScript 파일을 저장할 위치입니다. 그리고 img 폴더는 배경 이미지용입니다.

걸프 구성

필요한 npm 패키지를 설치하고 Gulp 워크플로를 살펴보겠습니다.

패키지 설치 및 모듈 가져오기

패키지를 설치하려면 터미널 또는 명령줄 창을 열고 프로젝트 디렉터리로 이동합니다.

그런 다음 npm install을 실행합니다. package.json에 나열된 패키지를 설치하려면 파일. 또한 npm update를 실행하는 것이 좋습니다. 이후에 각 패키지의 최신 버전을 사용하고 있는지 확인하십시오. GitHub 리포지토리에 있는 버전은 시간이 지남에 따라 구식이 되기 때문입니다.

모든 것이 설치되었으면 gulpfile을 살펴보겠습니다.

모듈 가져오기

먼저 모듈로 설치한 npm 패키지를 가져옵니다. 이를 통해 Gulp 작업에서 패키지 기능에 액세스할 수 있습니다. 코드에서는 다음과 같습니다.

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');
const browsersync = require('browser-sync').create();

상단에서 일부 Gulp 함수를 가져오고 있습니다. src , dest , watch 및 series .

그런 다음 다른 패키지를 로드합니다.

• gulp-sass , Sass 파일을 CSS로 컴파일
• gulp-postcss 및 cssnano 최종 CSS 파일을 축소하는 플러그인
• gulp-terser , JavaScript 파일 축소
• browser-sync , 로컬 서버를 실행하고 웹사이트 파일에 동기화합니다.

Browsersync에 중점을 두고 있기 때문에 이 프로젝트의 워크플로를 최소화하고 있습니다.

이제 gulpfile에서 구성한 다양한 Gulp 작업을 살펴보겠습니다.

Sass 작업

첫 번째 작업은 Sass 작업입니다.

// Sass Task
function scssTask(){
  return src('app/scss/style.scss', { sourcemaps: true })
      .pipe(sass())
      .pipe(postcss([cssnano()]))
      .pipe(dest('dist', { sourcemaps: '.' }));
}

이 함수는 style.scss를 사용합니다. 파일에서 sass()를 사용하여 CSS로 컴파일합니다. 함수를 사용한 다음 PostCSS를 사용하여 cssnano()로 파일을 축소합니다. , 마지막으로 결과 CSS 파일을 dist에 저장합니다. 폴더. 또한 Sass 파일에서 각 스타일 규칙의 출처를 확인할 수 있도록 소스맵 파일을 만들고 있습니다.

자바스크립트 작업

다음 작업은 JavaScript 작업입니다.

// JavaScript Task
function jsTask(){
  return src('app/js/script.js', { sourcemaps: true })
    .pipe(terser())
    .pipe(dest('dist', { sourcemaps: '.' }));
}

이 함수는 script.js를 사용합니다. 파일을 만들고 terser()를 사용하여 축소합니다. , 결과 파일을 dist에 저장합니다. 폴더. 또한 소스맵 파일을 생성합니다. 여기에서 바닐라 JavaScript로 작업한다고 가정하고 번들링과 같은 고급 작업은 수행하지 않습니다.

이제 Browsersync 섹션으로 이동하겠습니다!

Gulpfile에 Browsersync 추가

gulpfile에서 처음에 다음 행을 사용하여 Browsersync를 JavaScript 상수로 가져왔습니다. const browsersync = require('browser-sync').create(); . create() 함수는 이름에서 알 수 있듯이 로컬 서버를 실행하는 데 사용할 수 있는 Browsersync 인스턴스를 생성합니다.

그런 다음 Browsersync 작업을 생성할 수 있습니다!

BrowsersyncServe 작업

첫 번째 작업인 browsersyncServe , 로컬 서버를 초기화합니다:

function browsersyncServe(cb){
  browsersync.init({
    server: {
      baseDir: '.'
    }    
  });
  cb();
}

browsersync.init()를 실행합니다. baseDir을 사용하여 로컬 서버를 시작하는 함수 서버 옵션. 우리의 경우 baseDir을 설정하고 싶습니다. '.'로 . 이것은 로컬 서버가 gulpfile이 있는 동일한 디렉토리에서 웹사이트를 시작할 것임을 나타냅니다.

index.html 파일과 gulpfile이 프로젝트 루트에 있으므로 웹사이트가 동일한 위치에서 실행되기를 원합니다.

cb가 무엇인지 궁금하시다면 매개변수는 콜백 함수입니다. Gulp에서 모든 작업은 비동기 JavaScript 함수이므로 함수가 아무 것도 반환하지 않으면 콜백을 사용하여 함수가 완료되었음을 명시적으로 나타내야 합니다.

두 Browsersync Gulp 작업은 다른 작업처럼 스트림을 반환하지 않으므로 둘 다 콜백이 있습니다. 문서에서 Gulp의 콜백 및 비동기 함수에 대해 자세히 알아볼 수 있습니다.

browsersyncServe task는 서버를 시작하지만 코드를 변경할 때 브라우저를 자동으로 다시 로드하려고 합니다.

BrowsersyncReload 작업

서버를 다시 로드하기 위해 browsersyncReload라는 또 다른 작업이 있습니다. 그렇게 할 것입니다:

function browsersyncReload(cb){
  browsersync.reload();
  cb();
}

아주 기본적인 기능입니다. browsersync.reload()를 실행하는 것뿐입니다. Browsersync에 로컬 웹사이트를 다시 로드하도록 지시합니다.

이제 Browsersync 작업이 설정되었으므로 Gulp 워크플로에 통합해 보겠습니다.

Gulp 작업에 Browsersync 추가

기본 작업

기본 Gulp 작업에서 gulp를 처음 실행할 때 한 번 실행하려는 모든 작업을 실행할 것입니다. 명령줄에서.

// Default Gulp Task
exports.default = series(
  scssTask,
  jsTask,
  browsersyncServe,
  watchTask
);

코드에서 볼 수 있듯이 Sass 및 JavaScript 작업을 실행한 다음 Browsersync 서버를 초기화하고 마지막으로 watch 작업을 실행하고 있습니다.

작업 보기

watch 작업은 파일을 모니터링하고 코드 변경을 감지하면 필요한 작업을 실행합니다.

// Watch Task
function watchTask(){
  watch('*.html', browsersyncReload);
  watch(['app/**/*.scss', 'app/**/*.js'], series(scssTask, jsTask, browsersyncReload));
}

우리는 감시 작업에서 두 ​​가지 작업을 수행합니다.

• HTML 파일을 보고 browsersyncReload 실행 변경 후
• Sass 또는 JavaScript 파일을 관찰하고 Sass 작업, JavaScript 작업을 실행한 다음 browsersyncReload 변경 후

HTML 파일만 업데이트했을 때 Sass 및 JavaScript 작업을 실행하고 싶지 않았기 때문에 따로 보관했습니다. 물론 HTML이 변경되면 모든 작업을 다시 실행할 수 있습니다. 시간이 조금 더 걸릴 뿐입니다.