What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  1. DevOps

gulp

IE 대응을 위해 바벨을 적용할 일이 생겼는데, 이왕 사용하게 된 걸, gulp를 이용해서 스크립트를 es5 문법으로 변경하고, uglify까지 함께 적용하기로 했다.

gulp는 자바스크립트 빌드 자동화 툴이다.

설치

npm install -g gulp

npm init

npm install -save-dev gulp gulp-util

gulp에서 ES6 문법을 사용하기 위해 필요한 모듈 설치

npm install --save-dev babel-core babel-preset-es2015

.babelrc 파일 생성

.babelrc
{
  "presets": ["es2015"]
}

gulpfile.babel.js 작성

gulpfile.babel.js
import gulp from 'gulp';
import gutil from 'gulp-util';
import babel from 'gulp-babel'; // babel을 사용하기 위한 플러그인

import uglify from 'gulp-uglify';
import cleanCSS from 'gulp-clean-css';
import del from 'del';

const DIR = {
    SRC: 'assets',
    DEST: 'dist'
};

const SRC = {
    JS: DIR.SRC + '/js/*.js',
    CSS: DIR.SRC + '/style/*.css',
};

gulp.task('clean', () => {
    return del.sync([DIR.DEST]); // dist 디렉토리 하위 비우기
});

gulp.task('js', () => {
    return gulp.src(SRC.JS)
        .pipe(babel({ // babel을 사용해서 js 파일 변환
            presets: ['es2015']
        }))
        .pipe(uglify()) // minify 
        .pipe(gulp.dest(DIR.DEST));
});

gulp.task('css', () => {
    return gulp.src(SRC.CSS)
           .pipe(cleanCSS({compatibility: 'ie8'})) // css minify
           .pipe(gulp.dest(DIR.DEST));
});

// 특정 디렉토리 하위에 변화를 감지해서 변경사항 반영
gulp.task('watch', () => { 
    gulp.watch(SRC.JS, ['js']);
    gulp.watch(SRC.CSS, ['css']);
});


gulp.task('default', ['clean', 'js', 'css', 'watch'], () => {
    gutil.log('Gulp is running');
});

스크립트 실행

# 특정 태스크만 실행시키려면 뒤에 태스크명 추가 입력
# gulp css

gulp

PreviousDevOpsNextPHP

Last updated 7 years ago