2015/10/28 Gotanda.js #1

1. gulp 芸
2015/10/28 Gotanda.js #1
@hoto17296

3. Join Slack !!
http://gotanda.js.org/

4. gulp.js
• タスクランナー
• Node.js の Stream API

5. gulp.js
.scss
.css
.min
.gz
gzipsass minify
src dest
pipe pipe

6. ふつうの使い方
• ES2015 / AltJS を ES5 にトランスパイル
• JS の minify / bundle
• Sass をコンパイル / minify / autoprefix
• gzip 生成
• lint

7. ふつうじゃない使い方
• ブログとして使う

8. @hoto17296
• ブログ職人
• いままでに 9 回ブログを作りなおしている
• なお、ブログを作って満足してしまって
あまり記事を書けていない模様

9. いまのブログ
• http://hotolab.net/
• 最近「 jQuery 滅びよ」とか言ってるのに
ブログのデザインに jQuery を使っている
• Jekyll + GitHub Pages
• プラグイン使えないのでカスタムしづらい

10. 作りたいブログ (要件)
• 静的なページ群としてビルドできる
• 動的なアプリの運用は金がかかる
• 静的なページなら無料でも運用できる
• 手軽に書けて手軽に公開できる
• Markdown で書ける
• 書きながら確認できる

11. 作りたいブログ (要件)
• Jekyll 風に記事にメタ情報を設定できる
• tag, description, og-image など
• パーマリンクが使える
• http://hotolab.net/blog/{entry_title}

12. 「はてなブログを使え」
• 課金しないと独自ドメイン使えない
• ブログに月1000円はちょっとキツい
• ポータビリティが微妙
• Markdown のままエクスポートできない

13. gulp で blog が作れるのか
• 響きが似ているから多分いける

14. 0. ディレクトリ構成
src/
_posts/
***.md
_layouts/
assets/
index.html.jade
public/
gulpfile.js

15. 1. なにはともあれ Markdown
• gulp-markdown
gulp.src('./src/_posts/*.md')
.pipe(markdown())

16. 2. パーマリンクっぽくする
.pipe(rename((path) => {
path.dirname += '/' + path.basename;
path.basename = 'index';
path.extname = 'html';
return path;
}))
• gulp-rename

17. 3. レイアウトに埋め込む
.pipe(layout({
title: 'My New Blog!!!',
layout: './src/_layout/default.jade'
}))
• gulp-layout

18. 4. メタ情報をレイアウトに渡す
gulp.src('./src/**/*.md')
.pipe(frontMatter())
.pipe(markdown())
.pipe(layout(function(file) {
return file.frontMatter;
}))
• gulp-frontmatter

19. 参考： Jekyll のメタ情報埋め込み
メタ情報
マークダウン

20. 5. 確認できるようにする
gulp.src('./public')
.pipe(webserver({
livereload: true,
...
}));
• gulp-webserver

21. 6. 公開する ( GitHub Pages )
gulp.src('./public/**')
.pipe(ghPages());
• gulp-gh-pages

22. 6. 公開する ( Amazon S3 )
gulp.src('./public/**')
.pipe(s3({
Bucket: "bucket-name",
...
}));
• gulp-s3-upload

23. 6. 公開する ( FTP )
gulp.src('./public/**')
.pipe(ftp({
host: 'example.com',
user: 'hoto',
pass: '1234'
}));
• gulp-ftp

24. 7. SNS で拡散する
var oauth = {
consumerKey: '...',
...
};
gulp.src('package.json')
.pipe(twitter(oauth, 'ブログ更新!!!'));
• gulp-twitter

25. その他
• gulp-favicons: favicon などをまとめて生成
• gulp-fontmin: フォントのサブセットを作成
• gulp-robots: robots.txt を生成
• gulp-email: メールを送る

26. DEMO

27. したかった (´･_･`)

28. まとめ
• ブログは gulp で作れる！！！

29. Enjoy!!!