전면 개발 환경 설정을 위한 gulp.js 패키지

브라우저 동기화

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

브라우저 동기화 – 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();

꿀꺽-ejs

ejs를 사용하여 일반 범위를 묶거나 간단한 조건문 또는 반복문을 사용하십시오.

꿀꺽-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'))

꿀꺽 꿀꺽

scss 파일을 만드는 데 사용되는 Gulp용 Sass 플러그인.

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 코드의 브라우저 호환성을 높이기 위해 접두사가 자동으로 추가됩니다.

꿀꺽-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"
)