gulp-staticgen.pdf

Transcript

1. GULP۽ ੿੸ ಕ੉૑ ࢤࢿೞӝ ߅ହ਋, @pismute
3. markdown
4. Template markdown
5. Template Markdown Build HTML
6. Build >>>>> livereload HTML Template Markdown
7. Deploy Build >>>>> livereload HTML Template Markdown
8. Build >>>>> livereload HTML Handlebarsjs Markdown Deploy
9. Gulp HTML Deploy Build >>>>> livereload Handlebarsjs Markdown
10. HTML gulp.task('markdown', …); gulp.task('handlebarjs', …); gulp.task('livereload', …); gulp.task('build', …); gulp.task('asciidoc', …); gulp.task('deploy', …);
12. Ҷ੉! ੿੸ ಕ੉૑ܳ ૒੽ ݅ٚ ੉ਬח? ▸ ѾҴ HTML਷ ೐ۿ౟ূ٘, ੗زചפө NodeJS۽… ▸ ӝמਸ Task ױਤ۽ ଂѐࢲ ઑ݀ ೧ࠁ੗ ▸ ӒܻҊ, য૵ݶ ੤ࢎਊ
13. ߊ಴ ղਊ. ▸ Gulpܳ যڃ ו՝ਵ۽ ࢎਊೞݶ જਸ૑? ▸ ૒੽ ੿੸ ಕ੉૑ܳ ࢤࢿೞݶࢲ Ҋ޹೮؍ Ѫٜ.
14. GULP
15. GULP Task gulp.task('myTask', function(){ return gulp.src(['**/*']) .pipe(gulp.dest('dest')); });
16. 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)); });
17. GULP Task ࣽࢲ gulp.task('serial2', ['serial1'], function() { ... });
18. GULP Task ࣽࢲ: run-sequence var seq = require('run-sequence'); gulp.task('task', function() { seq('serial1', ['parallel21','parallel22'], 'serial2'); });
19. GULP Task ՘ղӝ: callback var seq = require('run-sequence'); gulp.task('task', function(done) { seq('serial1', ['parallel1','parallel2'], ‘serial2’, done); });
20. GULP Task ՘ղӝ: return stream gulp.task(‘somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream; });
21. 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; });
22. ੿੸ ಕ੉૑ ٜ݅ӝ
23. ੿੸ ಕ੉૑ ٜ݅ӝ 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
24. 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(); }); ੿੸ ಕ੉૑ ٜ݅ӝ
25. init partials gulp.task('partials', function(){ return gulp.src(global.PARTIALS) .pipe(……); }); ੿੸ ಕ੉૑ ٜ݅ӝ
26. init partials layouts gulp.task('layouts', function(){ return gulp.src(global.LAYOUTS) .pipe(……); }); ੿੸ ಕ੉૑ ٜ݅ӝ
27. init partials layouts docs gulp.task('docs', function(){ return gulp.src(global.DOCS) .pipe(layout/partial ੸ਊ) .pipe(……); }); ੿੸ ಕ੉૑ ٜ݅ӝ
28. init partials layouts docs templates gulp.task('templates', function(){ return gulp.src(global.TEMPLATES) .pipe(layout/partial ੸ਊ) .pipe(……); }); ੿੸ ಕ੉૑ ٜ݅ӝ
29. init build partials layouts docs templates var seq = require('run-sequence'); gulp.task('build', function(done){ seq(['partials', 'layouts'], 'docs', 'templates', done); }); ੿੸ ಕ੉૑ ٜ݅ӝ
30. init build build:partials build:layouts build: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 ੿੸ ಕ੉૑ ٜ݅ӝ
31. ‣ ౵ੌਸ ੓ח Ӓ؀۽ ࠂࢎ init copy build build:partials build:layouts build:docs build:templates ੿੸ ಕ੉૑ ٜ݅ӝ
32. init images ‣ ੉޷૑ ঑୷(gulp-cache, gulp-imagemin) copy build build:partials build:layouts build:docs build:templates ੿੸ ಕ੉૑ ٜ݅ӝ
33. init scripts ‣ gulp-sourcemaps ‣ gulp-jshint ‣ gulp-babel ‣ gulp-concat ‣ gulp-rename ‣ gulp-uglify images copy build build:partials build:layouts build:docs build:templates ੿੸ ಕ੉૑ ٜ݅ӝ
34. init styles images copy build build:partials build:layouts build:docs build:templates scripts ‣ gulp-sourcemaps ‣ gulp-autoprefixer ‣ gulp-less / gulp-sass ‣ gulp-concat ‣ gulp-rename ‣ gulp-minifyCss ੿੸ ಕ੉૑ ٜ݅ӝ
35. resources init styles images copy build build:partials build:layouts build:docs build:templates scripts gulp.task('resources', function(done){ seq(['copy', 'images', 'scripts', ‘styles'], // parallel done); }); ੿੸ ಕ੉૑ ٜ݅ӝ
36. init build build:partials build:layouts build:docs build:templates gulp.task('resources', function(done){ seq(['resources:copy', 'resources:images', 'resources:scripts', 'resources:styles'], done); }); resources resources:styles resources:images resources:copy resources:scripts ੿੸ ಕ੉૑ ٜ݅ӝ
37. staticgen init [default] build build:partials build:layouts build:docs build:templates resources resources:styles resources:images resources:copy resources:scripts gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done); }); gulp.task('default', 'staticgen'); ੿੸ ಕ੉૑ ٜ݅ӝ
38. 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(……); }); ੿੸ ಕ੉૑ ٜ݅ӝ
39. 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); }); ੿੸ ಕ੉૑ ٜ݅ӝ
40. 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()); }); ੿੸ ಕ੉૑ ٜ݅ӝ
41. watch staticgen:watch staticgen:livereload staticgen gulp.task('watch', function(done){ seq(['staticgen:livereload', 'staticgen'], 'staticgen:watch', done); }); ੿੸ ಕ੉૑ ٜ݅ӝ
42. 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: 'git@github.com:pismute/pismute.github.io.git', cacheDir: '.gh-pages', branch:'master' })); }); }); ੿੸ ಕ੉૑ ٜ݅ӝ
43. 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 …… ੿੸ ಕ੉૑ ٜ݅ӝ
44. TASK ҕਬೞӝ
45. TASK ҕਬೞӝ gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done); }); gulp.task('staticgen', function(done){ seq('init', ['build', 'resources'] done); });
46. TASK ҕਬೞӝ var taskLibrary = require(‘my-task-library');
47. TASK ҕਬೞӝ gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.md' …… }); gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.asc' …… });
48. TASK ҕਬೞӝ var gulp = require('gulp'); var taskLibrary = require(‘my-task-library’) taskLibrary.init(gulp); gulp.task('init', function(done){ global.DOCS = ‘my-docs/**/*.md’; …… });
49. TASK ҕਬೞӝ . $"" node_modules !"" gulp $"" my-task-library $"" node_modules $"" gulp э਷ Ѫ э૑݅ ׮ܲ ݽٕ!
50. TASK ҕਬೞӝ var Handlebars = require('handlebars'); var taskLibrary = require('my-task-library') taskLibrary.init(Handlebars); Handlebars.registerHelper('square', function(n, options) { return n * n; });
51. 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)
52. Ѿۿ ▸ Gulp જই ▸ pipe ੤߀׮ ▸ ࠺زӝ ▸ ݆੉ ࡈۄ(grunt ࠁ׮) ▸ ௏٘ ૣই
53. ASCIIDOC
54. 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 item 2. Another item * Unordered sub-list. 1. Actual numbers don't matter, just that it's a number 1. Ordered sub-list 4. And another item. [I'm an inline-style link](https://www.google.com) ![I'am an inline image](https://host/path/to/image.png")
55. ASCIIDOC
56. ASCIIDOC ਃড ▸ Markdown ୊ۢ ࢎਊೡ ࣻ ੓׮. ▸ Attributes - ޙࢲ ࣘࢿ੉ա ߸ࣻ ੿੄ оמ ▸ ޙߨъઑ ನೣ ▸ Include ޙ ▸ Tables ▸ Callouts ▸ …… ▸ PDF ٜ݅Ѣۄݶ Asciidoc
57. ASCIIDOC Callouts
58. HANDLEBARS.JS
 AND HELPER
59. HANDLEBARS Dashbars (https://github.com/pismute/dashbars) Underscoreܳ Templateীࢲ..
60. хࢎ೤פ׮