[gulp.js] gulp 문법 (CSS) minifycss, gulp-pug

01 설치

 

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

 

 

 

 

 

02 문법 (css 버전)

02-1  src 폴더 만든 뒤 views, styles, scripts 폴더 생성

 

src__

 

src__/views

• src__/views/main.css

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

 

 

 

02-2  gulpfile.js 코딩  //  minifycss

• gulpfile.js

const gulp = require('gulp')
const minifycss = require('gulp-minify-css')

minifycssTask = async () => gulp.src("src__/styles/main.css")
.pipe(minifycss())
.pipe(gulp.dest("build/styles"))


exports.default = gulp.series(minifycssTask)

 

 

build 폴더 안에 styles 폴더를 생성된 곳에 main.css 파일 생성

 

 

 

02-3  gulp 문법 사용

• const watchTask = async () => gulp.watch("src__styles/*.css", minifycssTask)

 

• gulpfile.js

// npm install gulp-minify-css --save-dev
const gulp = require('gulp')
const minifycss = require('gulp-minify-css')

minifycssTask = async () => gulp.src("src__/styles/main.css")
.pipe(minifycss())
.pipe(gulp.dest("build/styles"))

const watchTask = async () => gulp.watch("src__styles/*.css", minifycssTask)

exports.default = gulp.series(minifycssTask)

 

main.css 색상을 변경하면

build 폴더 속에 있는 main.css도 실시간 변경

 

 

 

02-4  gulp 문법 사용

 

npm install gulp-pug --save-dev

 

• gulpfile.js

// npm install gulp-minify-css --save-dev
const gulp = require('gulp')
const pug = require('gulp-pug')

const pugTask = async () => gulp.src("src__/views/*.pug")
.pipe(pug())
.pipe(gulp.dest("build/views"))

const watchTask = async () => gulp.watch("src__views/*.pug", pugTask)

exports.default = gulp.series(pugTask, watchTask)

 

src__

 

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 퍼그 문서
    body
        h1#heading 퍼그 문서입니다
        p 반갑습니다

 

build에 home.html이 생성