[gulp.js] gulp 문법 예제

01 미션

• 이 파일을 완성하여 src__ 의 구조가 빌드되어 build 폴더에 안착하게 만들자!
• 그 결과, build/views/home.html 은 다음과 같아야 한다.

 

 

 

 

 

 

02 코딩

// gulp 가 command 에서 사용되도록 함
npm install -g gulp-cli

npm init -y

// 내 폴더에서 gulp 가 실행
- npm install gulp --save-dev

// 굴프 버전 확인. 깔렸는지 확인
- gulp --version

npm install gulp-uglify --save-dev

npm install gulp-concat --save-dev

npm install gulp-minify-css --save-dev

npm install gulp-pug --save-dev

 

 

• gulpfile.js

/*
미션 : 
이 파일을 완성하여 src__ 의 구조가 빌드되어 build 폴더에 안착하게 만들자!
그 결과, build/views/home.html 은 다음과 같아야 한다.
*/

const gulp = require('gulp')
const pug = require('gulp-pug')
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const minifycss = require('gulp-minify-css')

// src 폴더 아래의 모든 js 파일
const scriptTask = async () => gulp.src('src__/scripts/*.js')
.pipe(concat('main.js'))
.pipe(uglify()) // minify 해서
.pipe(gulp.dest('build/scripts')); //dist 폴더에 저장

// css 폴더의 main.css 파일을
const pugTask = async () => gulp.src('src__/views/*.pug')
.pipe(pug()) // 포함되어 있는 @import를 분석해서 하나의 파일을 병합하고 minify 해서
.pipe(gulp.dest('build/views')); // dist 폴더에 저장

// css 폴더의 main.css 파일을
const styleTask = async () => gulp.src('src__/styles/main.css')
.pipe(minifycss()) // 포함되어 있는 @import를 분석해서 하나의 파일로 병합하고 mifity 해서
.pipe(gulp.dest('build/styles')); // dist 폴더에 저장

const watchTask = async () => {
    gulp.watch('src__/scrtips/*.js', scriptTask)
    gulp.watch('src__/views/*.pug', pugTask)
    gulp.watch('src__/styles/main.css', styleTask)
}

// 배열로 추가
exports.default = gulp.series([pugTask, styleTask, scriptTask, watchTask])

 

 

 

src__

 

src__/scripts

• main.js

const form = document.getElementById('form');;
const log = document.getElementById('log');

function logsubmit(event) {
    log.textContent = `Form Submitted! ${form.dataset.value}`;
    event.preventDefault();
}

form.addEventListener('submit', logsubmit)

 

 

src__/styles

• main.css

h1{
    color: red;
}
p{
    color: orange;
}

 

 

src__/views

• home.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title 퍼그 문서
    link(rel="stylesheet", href="../styles/main.css")
  body 
    h1 FORM TEST
    form#form 
      label VALUE 
        input(type="text", name="data")
      button(type="submit") SUBMIT
    p#log
    script(src="../scripts/main.js")