[로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자

모바일 프로젝트는 웬만한 모든 게 정상작동하기 때문에 큰 문제가 없는데, pc/반응형 web 작업의 경우, 우리의 못난이 익스플로러. 그 못난이 덕분에 크로스 브라우징 확인이라는 조금의 수고가 필요하다.

 

이에 대한 수고를 덜어주는 플러그인이 browser-sync + gulp-sass 조합이다. 마치 비쥬얼 스튜티오의 live server + live sass compiler 같은 조합으로, browser-sync은 로컬 서버를 생성하고, gulp-sass는 scss를 css로 컴파일하는 플러그인인데, 이 gulp-sass에 browser-sync를 연결해두면, scss 수정과 동시에 서버에 업데이트를 해줘, 새로고침 없이 바로 서버에서 확인 가능하다.

그럼 먼저 browser-sync를 설치해보자.

1. 설치

npm install --save-dev browser-sync

2. gulpfile.js 설정

const gulp = require("gulp");
const browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: "src", // 서버에 띄울 폴더 위치 지정 
      directory: true
    }
  });
  gulp.watch("src/*").on("change", browserSync.reload);
  	// src 안의 파일들을 감시하고 있다가, 내용이 변동되면 재실행 
});

gulp.task(
    "default",
    gulp.parallel("browserSync") 
);

3. gulp 실행

gulp

4. 서버확인

[00:00:00] Starting 'browserSync'...
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://주소~주소~  // 브라우저 창이 닫혔을 시 이 주소로 들어가면 된다.
    External: http://주소~주소~
 ------------------------------------
          UI: http://주소~주소~
 UI External: http://주소~주소~
 ------------------------------------
[Browsersync] Serving files from: src/

만약, 로컬 서버를 켠 상태에서 코딩하다가 브라우저가 갑자기 꺼진다면, 방금 저장한 파일에 오류가 있다는 의미이다. 방금 저장한 파일을 다시 열어 수정하고, gulp browserSync을 다시 실행해야 한다.

터미널에서 나가는 방법은 ctrl + c이다.

5. gulp-sass에 연결하여, scss가 변경되면 바로 서버에 적용시키기

const sass = require('gulp-sass'); 
const sourcemaps = require('gulp-sourcemaps'); 
const Fiber = require('fibers');
const dartSass = require('dart-sass');
const autoprefixer = require('autoprefixer');
const postcss = require('gulp-postcss');

// ★★★★ add start : browserSync 설치 및 설정
const browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: "src", // ★★★★ 서버에 띄울 폴더 위치 지정 
      directory: true
    }
  });
  gulp.watch("src/*").on("change", browserSync.reload);
  	// ★★★★ src 안의 파일들을 감시하고 있다가, 내용이 변동되면 재실행 
});

gulp.task(
    "default",
    gulp.parallel("browserSync") 
);
// ★★★★ add end

const apfBrwsowsers = [
  'ie >= 8',
];

gulp.task('sass', function(){
  const options = {
    sass : {
      outputStyle: 'expanded',
      indentType: 'tab',
      indentWidth: 1, 
      compiler: dartSass
    },
    postcss: [ autoprefixer({ 
      overrideBrowserslist: apfBrwsowsers,
    }) ]
  };
  return gulp
    .src("src/scss/*.scss") 
    .pipe( 
      sass({
      	includePaths: require("node-normalize-scss").includePaths
      })
    )
    .pipe(sourcemaps.init()) 
    .pipe(sass({fiber:Fiber}).on('error', sass.logError))
    .pipe(postcss(options.postcss))
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest("dist/scss")) 
    .pipe(browserSync.stream()); // ★★★★ add
    	// ★★★★ browserSync 가 실행되고 있을 때, scss 변화가 감지되면 바로 수정 반영
});

// ★★★★ add start : 감시대상 scss가 변동되면 자동으로 업데이트!
gulp.task('watch', function () { 
  gulp.watch('./src/scss/*.scss', gulp.series('sass')); // 감시해야할 scss 위치 지정
});
// ★★★★ aadd end

gulp.task(
    "default",
    gulp.parallel("sass", "watch", "browserSync") // ★★★★ add browserSync
);

2021/01/07 - [web/gulp] - gulp 설치 + .src() .pipe() .dest()

2021/01/08 - [web/gulp] - [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1

2021/01/08 - [web/gulp] - [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2

2021/01/08 - [web/gulp] - [css 초기화] gulp-sass + node-normalize-scss