gulp.js 프론트개발 환경 세팅에 사용되는 패키지

browser-sync

이름에서 알 수 있듯이 브라우저를 동기화해주는 프로그램으로 소스파일의 수정이 감지되면 자동으로 브라우저를 새로고침하여 수정된 화면을 볼 수 있다.

browser-sync - npm

설치

npm install --save-dev browser-sync

사용 예시

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

// 실행
browserSync.init({
    port: 3000,
    browser: "google chrome",
    startPath: "index.html",
    server: {
        baseDir: "./dist",
    }
});

// 새로고침
browserSync.reload();

gulp-ejs

공통영역 include 또는 간단한 조건문, 반복문등을 사용하기 위하여 ejs를 사용한다.

gulp-ejs - npm

설치

npm install --save-dev gulp-ejs

사용 예시

const ejs = require('gulp-ejs');

gulp.src('./html/*.ejs')
    .pipe(ejs({
        title: 'ejs page'
    }))
    .pipe(gulp.dest('./dist'))

gulp-sass

gulp를 위한 Sass 플러그인으로 scss 파일을 빌드하는데 사용한다.

gulp-sass - npm

설치

gulp-sass를 사용하려면 gulp-sass와 Sass 컴파일러를 모두 설치해야 한다.

npm install --save-dev sass gulp-sass

사용 예시

const sass = require('gulp-sass')(require('sass'));

gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle : 'expanded',
        indentType  : 'tab',
        indentWidth : 1,
        sourceComments: false
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'))

gulp-autoprefixer

CSS코드의 브라우저 호환성을 높이기 위하여 prefix를 자동으로 붙여준다.

gulp-autoprefixer - npm

설치

npm install --save-dev gulp-autoprefixer

사용 예시

const autoprefixer = require('gulp-autoprefixer');

gulp.src('./css/*.css')
    .pipe(autoprefixer({
        cascade: false
    }))
    .pipe(gulp.dest('./dist/css'))

package.json 파일에 browserslist를 추가하여 브라우저 범위를 지정할 수 있다.

// package.json
"browserslist": [
    "last 2 versions"
]