#3. Glup로 퍼블리싱 개발환경 만들기

티스토리 뷰

Dev/HTML&CSS

#3. Glup로 퍼블리싱 개발환경 만들기 - HTML과 웹서버

야훔 2019. 4. 24. 17:29

자, 지난번엔 SCSS을 컴파일하고 배포하는 방법에 대해서 알아봤다. 그럼 오늘은 Hello, World를 띄우고 퍼블리싱된 HTML에 CSS를 적용하는 법에 대해서 알아보도록 하자. 일단 HTML파일과 컴파일된 CSS를 적용해서 브라우저에서 확인하기 위해서 웹서버를 띄워야한다. 웹서버는 Node.js의 Express 패키지를 이용해 웹서버를 띄우도록 할 거다. 혹시 Node.js를 이용해서 서버를 띄우는 것에 대해서 걱정이 된다면 걱정할 필요 없다. 그냥 천천히 따라하면 다 된다.

일단 몇가지 패키지를 설치할 거다. 파워쉘을 켜서 아래의 명령어를 입력하자.

$ npm install gulp-nodemon -D
$ npm install express -D
$ npm install ejs -D

그리고 app.js 파일을 하나 만들어서 아래의 코드를 입력한다.

app.js

var express = require('express'); // express 모듈을불러옵니다. 
var app = express(); // app.js 에서 사용할 변수 app을 생성합니다.

// view로 활용될 폴더 경로를 설정합니다.
app.set( 'views' , '${ __dirname }/dist/' ); 
app.engine('html', require('ejs').renderFile);
app.set( 'view engine', 'html');
// 웹사이트의 location 의 루트경로를 설정합니다. 
app.use( '/' , express.static( `${ __dirname }/dist/` ));

app.get( '/' , ( req , res ) => {
    res.render( 'index' , {}) ; 
});

// Dir.js 에서 설정한 port 번호로 서버를 띄울 준비를 합니다.
var server = app.listen( 8005, () => {
  console.log( 'Express listening on port : ' +  server.address().port );
});

이러면 웹서버를 띄우는 준비가 약 90%정도 되었다. 이제 gulpfile.js을 수정하자.

gulp.js

var gulp = require('gulp');
var scss = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var nodemon = require('gulp-nodemon');

// 소스 파일 경로
var PATH = {
    ASSETS:  {
        FONTS:      './workspace/assets/fonts'
        , IMAGES:   './workspace/assets/images'
        , STYLE:    './workspace/assets/style'
    }
},
// 산출물 경로
DEST_PATH = {
    ASSETS: {
        FONTS:      './dist/assets/fonts'
        , IMAGES:   './dist/assets/images'
        , STYLE:    './dist/assets/style'
    }
};

gulp.task( 'scss:compile', () => {
    return new Promise( resolve => {
        var options = {
            outputStyle: "nested" // nested, expanded, compact, compressed
            , indentType: "space" // space, tab
            , indentWidth: 4 // 
            , precision: 8
            , sourceComments: true // 코멘트 제거 여부
        };

        gulp.src( PATH.ASSETS.STYLE + '/*.scss' )
            .pipe( sourcemaps.init() )
            .pipe( scss(options) )
            .pipe( sourcemaps.write() )
            .pipe( gulp.dest( DEST_PATH.ASSETS.STYLE) );
        
        resolve();
    });
});

gulp.task( 'nodemon:start', () => {
    return new Promise( resolve => {
        nodemon({
            script: 'app.js'
            , watch: 'app'
        });

        resolve();
    });
});

gulp.task( 'default', gulp.series(['scss:compile', 'nodemon:start']) );

추가된 내용을 설명하면 nodemon을 이용해 node.js express 서버를 띄우는 역할을 수행하게한다. 이때 app.js 파일을 참조하여 서버를 띄우게 만들었는데 app.js파일은 dist 폴더를 Context path로 잡아서 거기서 부터 HTML파일을 읽어 내는 것을 설정한 거다. 그럼 gulp 명령을 입력하면 어떤 메시지를 띄우는지 확인해보자.

정상적으로 서버가 띄워진것을 확인할 수 있다.

localhost:8005 로 접속해보면 에러가 발생하는 것을 확인할 수 있는데 이게 index 파일이 없으니까 에러가 난거다. 그럼 지금부터 HTML 파일을 작성하고 배포해보자.

일단 나는 html이라는 폴더를 만들어 거기에 index.html 파일을 만들었다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gulp Sample</title>
    <link rel="stylesheet" href="/assets/style/default.css" />
</head>
<body>
    <h1>Hello, World</h1>
</body>
</html>

코딩이 마무리 되었다면 이제 gulpfile.js 파일을 수정해보자.

var gulp = require('gulp');
var scss = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var nodemon = require('gulp-nodemon');

// 소스 파일 경로
var PATH = {
    HTML: './workspace/html'
    , ASSETS:  {
        FONTS:      './workspace/assets/fonts'
        , IMAGES:   './workspace/assets/images'
        , STYLE:    './workspace/assets/style'
    }
},
// 산출물 경로
DEST_PATH = {
    HTML: './dist'
    , ASSETS: {
        FONTS:      './dist/assets/fonts'
        , IMAGES:   './dist/assets/images'
        , STYLE:    './dist/assets/style'
    }
};

gulp.task( 'scss:compile', () => {
    return new Promise( resolve => {
        var options = {
            outputStyle: "nested" // nested, expanded, compact, compressed
            , indentType: "space" // space, tab
            , indentWidth: 4 // 
            , precision: 8
            , sourceComments: true // 코멘트 제거 여부
        };

        gulp.src( PATH.ASSETS.STYLE + '/*.scss' )
            .pipe( sourcemaps.init() )
            .pipe( scss(options) )
            .pipe( sourcemaps.write() )
            .pipe( gulp.dest( DEST_PATH.ASSETS.STYLE) );
        
        resolve();
    });
});

gulp.task( 'html', () => {
    return new Promise( resolve => {
        gulp.src( PATH.HTML + '/*.html' )
            .pipe( gulp.dest( DEST_PATH.HTML ) );

        resolve();
    });
});

gulp.task( 'nodemon:start', () => {
    return new Promise( resolve => {
        nodemon({
            script: 'app.js'
            , watch: 'app'
        });

        resolve();
    })
});

gulp.task( 'default', gulp.series(['scss:compile', 'html', 'nodemon:start']));

PATH쪽에 HTML 경로를 추가했고 html 태스크를 추가했다. 그리고 파워쉘에다가 gulp 명령을 입력하자.

정상적으로 HTML파일을 랜더링 하는 것을 확인할 수 있다.

다음 시간엔 이 상태에서 이제 HTML코드나 CSS코드가 변경될 때마다 gulp가 감지하여 컴파일을 다시해서 배포하는 기능을 추가하는 내용에 대해서 알아보는 시간을 갖으려고 한다.

오늘은 여기까지만! 안녕!

'Dev > HTML&CSS' 카테고리의 다른 글

#5. Glup로 퍼블리싱 개발환경 만들기 - Assets관리(상) (2)	2019.05.13
#4. Glup로 퍼블리싱 개발환경 만들기 - Watch와 BrowserSync (2)	2019.05.09
#2. Glup로 퍼블리싱 개발환경 만들기 - 전처리 스타일시트 (0)	2019.04.23
#1. Gulp 로 퍼블리싱 개발환경 만들기 - 입문 (0)	2019.04.22
Table colspan, rowspan (0)	2017.08.29

최근에 올라온 글

최근에 달린 댓글

야훔의 저렴한 개발

티스토리 뷰