gulp로 정적 페이지 생성하기 - play.node...
TRANSCRIPT
![Page 1: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/1.jpg)
GULP로 정적 페이지 생성하기박창우, @pismute
![Page 2: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/2.jpg)
![Page 3: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/3.jpg)
markdown
![Page 4: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/4.jpg)
Template
markdown
![Page 5: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/5.jpg)
Template
Markdown
Build HTML
![Page 6: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/6.jpg)
Build
>>>>>livereload
HTMLTemplate
Markdown
![Page 7: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/7.jpg)
Deploy
Build
>>>>>livereload
HTMLTemplate
Markdown
![Page 8: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/8.jpg)
Build
>>>>>livereload
HTMLHandlebarsjsMarkdown
Deploy
![Page 9: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/9.jpg)
Gulp
HTML
Deploy
Build
>>>>>livereload
HandlebarsjsMarkdown
![Page 10: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/10.jpg)
HTML
gulp.task('markdown', …);
gulp.task('handlebarjs', …);
gulp.task('livereload', …);
gulp.task('build', …);
gulp.task('asciidoc', …);
gulp.task('deploy', …);
![Page 11: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/11.jpg)
![Page 12: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/12.jpg)
굳이! 정적 페이지를 직접 만든 이유는?
▸ 결국 HTML은 프론트엔드, 자동화니까 NodeJS로…
▸ 기능을 Task 단위로 쪼개서 조립 해보자
▸ 그리고, 어쩌면 재사용
![Page 13: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/13.jpg)
발표 내용.
▸ Gulp를 어떤 느낌으로 사용하면 좋을지?
▸ 직접 정적 페이지를 생성하면서 고민했던 것들.
![Page 14: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/14.jpg)
GULP
![Page 15: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/15.jpg)
GULP
Task
gulp.task('myTask', function(){ return gulp.src(['**/*']) .pipe(gulp.dest('dest'));});
![Page 16: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/16.jpg)
GULP
gulp-load-plugins 모듈
// package.json에 정의한 모듈을// 편리하게 쓸 수 있도록 도와준다.var $ = require('gulp-load-plugins');
gulp.task('myTask', function(){ return gulp.src(['**/*']) .pipe($.using()) // 'gulp-using' 모듈을 lazy하게 로딩 .pipe($.size()) // 'gulp-size' 모듈을 lazy하게 로딩 .pipe(gulp.dest(global.DEST));});
![Page 17: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/17.jpg)
GULP
Task 순서
gulp.task('serial2', ['serial1'], function() { ...});
![Page 18: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/18.jpg)
GULP
Task 순서: run-sequence
var seq = require('run-sequence');
gulp.task('task', function() { seq('serial1', ['parallel21','parallel22'], 'serial2');});
![Page 19: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/19.jpg)
GULP
Task 끝내기: callback
var seq = require('run-sequence');
gulp.task('task', function(done) { seq('serial1', ['parallel1','parallel2'], ‘serial2’,
done);});
![Page 20: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/20.jpg)
GULP
Task 끝내기: return stream
gulp.task(‘somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream;});
![Page 21: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/21.jpg)
GULP
Task 끝내기: return promise
var Q = require('q');
gulp.task('somename', function() { var deferred = Q.defer();
// do async stuff setTimeout(function() { deferred.resolve(); }, 1);
return deferred.promise;});
![Page 22: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/22.jpg)
정적 페이지 만들기
![Page 23: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/23.jpg)
정적 페이지 만들기
Directory Layout.!"" app/# !"" layouts/# # !"" **/.model.json // document model# # $"" **/*.hbs // document decorators# !"" partials/# # $"" **/*.hbs // document components# !"" docs/# # !"" **/.model.json // document model# # !"" **/*.html.md // docs, markdown to html# # !"" **/*.html.asc // docs, asciidoc to html# # !"" **/*.html.hbs // docs, handlebars to html# # $"" **/* // copy to dist/# $"" root/# !"" **/.model.json // document model# !"" **/*.xml.hbs // template, handlebars to xml# !"" **/*.html.hbs // template, handlebars to html# $"" **/* // copy to dist/$"" dist/ //target directory
![Page 24: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/24.jpg)
Init
gulp.task('init', function(done) { ……
global.DOCS = 'app/docs/**/*.{md,hbs,asc}' global.TEMPLATES = ['app/root/**/*.hbs'] global.PARTIALS = 'app/partials/**/*.hbs' global.LAYOUTS = 'app/layouts/**/*.hbs'
…… done();});
정적 페이지 만들기
![Page 25: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/25.jpg)
init partials
gulp.task('partials', function(){ return gulp.src(global.PARTIALS) .pipe(……);});
정적 페이지 만들기
![Page 26: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/26.jpg)
init partials layouts
gulp.task('layouts', function(){ return gulp.src(global.LAYOUTS) .pipe(……);});
정적 페이지 만들기
![Page 27: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/27.jpg)
init partials layouts docs
gulp.task('docs', function(){ return gulp.src(global.DOCS) .pipe(layout/partial 적용) .pipe(……);});
정적 페이지 만들기
![Page 28: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/28.jpg)
init partials layouts docs templates
gulp.task('templates', function(){ return gulp.src(global.TEMPLATES) .pipe(layout/partial 적용) .pipe(……);});
정적 페이지 만들기
![Page 29: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/29.jpg)
init build partials
layoutsdocs templates
var seq = require('run-sequence');
gulp.task('build', function(done){ seq(['partials', 'layouts'], 'docs', 'templates', done);});
정적 페이지 만들기
![Page 30: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/30.jpg)
init build build:partials
build:layoutsbuild:docs build:templates
var seq = require('run-sequence');
gulp.task('build', function(done){ seq(['build:partials', 'build:layouts'], 'build:docs', 'build:templates', done);});
$ gulp build:docs
정적 페이지 만들기
![Page 31: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/31.jpg)
‣ 파일을 있는 그대로 복사
init
copy
build build:partials
build:layoutsbuild:docs build:templates
정적 페이지 만들기
![Page 32: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/32.jpg)
init
images
‣ 이미지 압축(gulp-cache, gulp-imagemin)
copy
build build:partials
build:layoutsbuild:docs build:templates
정적 페이지 만들기
![Page 33: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/33.jpg)
init
scripts
‣ gulp-sourcemaps
‣ gulp-jshint
‣ gulp-babel
‣ gulp-concat
‣ gulp-rename
‣ gulp-uglify
imagescopy
build build:partials
build:layoutsbuild:docs build:templates
정적 페이지 만들기
![Page 34: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/34.jpg)
init
stylesimagescopy
build build:partials
build:layoutsbuild:docs build:templates
scripts
‣ gulp-sourcemaps
‣ gulp-autoprefixer
‣ gulp-less / gulp-sass
‣ gulp-concat
‣ gulp-rename
‣ gulp-minifyCss
정적 페이지 만들기
![Page 35: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/35.jpg)
resources
init
styles
imagescopy
build build:partials
build:layoutsbuild:docs build:templates
scripts
gulp.task('resources', function(done){ seq(['copy', 'images', 'scripts', ‘styles'], // parallel done);});
정적 페이지 만들기
![Page 36: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/36.jpg)
init build build:partials
build:layoutsbuild:docs build:templates
gulp.task('resources', function(done){ seq(['resources:copy', 'resources:images', 'resources:scripts', 'resources:styles'], done);});
resources
resources:styles
resources:imagesresources:copy
resources:scripts
정적 페이지 만들기
![Page 37: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/37.jpg)
staticgen
init
[default] build build:partials
build:layoutsbuild:docs build:templates
resources
resources:styles
resources:imagesresources:copy
resources:scripts
gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done);});
gulp.task('default', 'staticgen');
정적 페이지 만들기
![Page 38: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/38.jpg)
watch
gulp.task('watch', function(done){ // STYLES 파일이 변경되면 `resources:styles’을 실행한다. gulp.watch(global.STYLES, 'resources:styles'); gulp.watch(global.SCRIPTS, 'resources:scripts'); ……});
gulp.task('resources:styles', function(){ return gulp.src(global.STYLES) .pipe($.cached(‘resources:styles')) // 변경된 파일만 통과 .pipe(……);});
정적 페이지 만들기
![Page 39: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/39.jpg)
watch
var minimatch = require('minimatch');
gulp.task('watch', function(done){ gulp.watch('**/*', function(event){ if( minimatch(event.path, lobal.STYLES) ) { stylesStream(event.path); } else if( …… ) { …… } });
……});
gulp.task('resources:styles', function(){ return stylesStream(global.STYLES);});
정적 페이지 만들기
![Page 40: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/40.jpg)
watch livereload
gulp.task('livereload', function(done){ $.connect.server({ livereload: true, root: [global.DEST], port: 9000 });});
gulp.task('docs', function(done){ return gulp.src(global.DOCS) .pipe(...) .pipe($.connect.reload());});
정적 페이지 만들기
![Page 41: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/41.jpg)
watch staticgen:watch
staticgen:livereload
staticgen
gulp.task('watch', function(done){ seq(['staticgen:livereload', 'staticgen'], 'staticgen:watch', done);});
정적 페이지 만들기
![Page 42: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/42.jpg)
watch staticgen:watch
staticgen:livereload
staticgen
deploy
gulp.task('deploy', function(done){ var deploy = require('gulp-gh-pages'); var path = require('path');
return gulp.src([path.join(global.DEST,'**/*'), '!**/*.map']) .pipe(deploy({ remoteUrl: '[email protected]:pismute/pismute.github.io.git', cacheDir: '.gh-pages', branch:'master' })); });});
정적 페이지 만들기
![Page 43: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/43.jpg)
watch staticgen:watch
staticgen:livereload
staticgen
deploy
help
$ gulp help # gulp-task-listing……
Main Tasks------------------------------ build deploy help livereload resources watch
Sub Tasks------------------------------ build:docs build:layouts build:partials ……
정적 페이지 만들기
![Page 44: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/44.jpg)
TASK 공유하기
![Page 45: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/45.jpg)
TASK 공유하기
gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done);});
gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done);});
![Page 46: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/46.jpg)
TASK 공유하기
var taskLibrary = require(‘my-task-library');
![Page 47: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/47.jpg)
TASK 공유하기
gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.md'
……});
gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.asc'
……});
![Page 48: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/48.jpg)
TASK 공유하기
var gulp = require('gulp');var taskLibrary = require(‘my-task-library’)
taskLibrary.init(gulp);
gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.md’;
……});
![Page 49: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/49.jpg)
TASK 공유하기
.$"" node_modules !"" gulp $"" my-task-library $"" node_modules $"" gulp
같은 것 같지만 다른 모듈!
![Page 50: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/50.jpg)
TASK 공유하기
var Handlebars = require('handlebars');var taskLibrary = require('my-task-library')
taskLibrary.init(Handlebars);
Handlebars.registerHelper('square', function(n, options) { return n * n;});
![Page 51: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/51.jpg)
TASK 공유하기
var gulp = require('gulp');var Handlebars = require('handlebars');var makdoc = require('gulp-makdoc')(gulp, Handlebars);
$ npm install gulp-makdoc
(https://github.com/pismute/gulp-makdoc)
![Page 52: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/52.jpg)
결론
▸ Gulp 좋아
▸ pipe 재밌다
▸ 비동기
▸ 많이 빨라(grunt 보다)
▸ 코드 짧아
![Page 53: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/53.jpg)
ASCIIDOC
![Page 54: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/54.jpg)
MARKDOWN
# H1## H2### H3#### H4##### H5###### H6
Emphasis, aka italics, with *asterisks* or _underscores_.Strong emphasis, aka bold, with **asterisks** or __underscores__.Combined emphasis with **asterisks and _underscores_**.Strikethrough uses two tildes. ~~Scratch this.~~
1. First ordered list item2. Another item * Unordered sub-list.1. Actual numbers don't matter, just that it's a number 1. Ordered sub-list4. And another item.
[I'm an inline-style link](https://www.google.com)![I'am an inline image](https://host/path/to/image.png")
![Page 55: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/55.jpg)
ASCIIDOC
![Page 56: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/56.jpg)
ASCIIDOC
요약
▸ Markdown 처럼 사용할 수 있다.
▸ Attributes - 문서 속성이나 변수 정의 가능
▸ 문법강조 포함
▸ Include 문
▸ Tables
▸ Callouts
▸ ……
▸ PDF 만들거라면 Asciidoc
![Page 57: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/57.jpg)
ASCIIDOC
Callouts
![Page 58: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/58.jpg)
HANDLEBARS.JSAND HELPER
![Page 59: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/59.jpg)
HANDLEBARS
Dashbars
(https://github.com/pismute/dashbars)
Underscore를 Template에서..
![Page 60: GULP로 정적 페이지 생성하기 - play.node 2017playnode.io/2015/download/gulp-staticgen.pdf · 2017. 12. 29. · 발표 내용. Gulp를 어떤 느낌으로 사용하면 좋을지?](https://reader034.vdocuments.net/reader034/viewer/2022051922/600fe42c51969757a74039cd/html5/thumbnails/60.jpg)
감사합니다