gulp芸

gulp 芸

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

Join Slack !!

http://gotanda.js.org/

http://gotanda.js.org/

gulp.js

• タスクランナー

• Node.js の Stream API

gulp.js

.scss.css .min .gz

gzipsass minify

src dest

pipe pipe

ふつうの使い方

• ES2015 / AltJS を ES5 にトランスパイル

• JS の minify / bundle

• Sass をコンパイル / minify / autoprefix

• gzip 生成

• lint

ふつうじゃない使い方

• ブログとして使う

@hoto17296

• ブログ職人

• いままでに 9 回ブログを作りなおしている

• なお、ブログを作って満足してしまってあまり記事を書けていない模様

いまのブログ

• http://hotolab.net/

• 最近「 jQuery 滅びよ」とか言ってるのにブログのデザインに jQuery を使っている

• Jekyll + GitHub Pages

• プラグイン使えないのでカスタムしづらい

http://hotolab.net/

作りたいブログ (要件)

• 静的なページ群としてビルドできる • 動的なアプリの運用は金がかかる • 静的なページなら無料でも運用できる

• 手軽に書けて手軽に公開できる

• Markdown で書ける

• 書きながら確認できる

作りたいブログ (要件)

• Jekyll 風に記事にメタ情報を設定できる

• tag, description, og-image など

• パーマリンクが使える

• http://hotolab.net/blog/{entry_title}

「はてなブログを使え」

• 課金しないと独自ドメイン使えない

• ブログに月1000円はちょっとキツい

• ポータビリティが微妙

• Markdown のままエクスポートできない

gulp で blog が作れるのか

• 響きが似ているから多分いける

0. ディレクトリ構成

src/ _posts/

***.md _layouts/ assets/ index.html.jade

public/ gulpfile.js

1. なにはともあれ Markdown

• gulp-markdown

gulp.src('./src/_posts/*.md') .pipe(markdown())

2. パーマリンクっぽくする

.pipe(rename((path) => { path.dirname += '/' + path.basename; path.basename = 'index'; path.extname = 'html'; return path;

}))

• gulp-rename

3. レイアウトに埋め込む

.pipe(layout({ title: 'My New Blog!!!', layout: './src/_layout/default.jade'

}))

• gulp-layout

4. メタ情報をレイアウトに渡す

gulp.src('./src/**/*.md') .pipe(frontMatter()) .pipe(markdown()) .pipe(layout(function(file) {

return file.frontMatter; }))

• gulp-frontmatter

参考： Jekyll のメタ情報埋め込み

メタ情報

マークダウン

5. 確認できるようにする

gulp.src('./public') .pipe(webserver({

livereload: true, ...

}));

• gulp-webserver

6. 公開する ( GitHub Pages )

gulp.src('./public/**') .pipe(ghPages());

• gulp-gh-pages

6. 公開する ( Amazon S3 )

gulp.src('./public/**') .pipe(s3({

Bucket: "bucket-name", ...

}));

• gulp-s3-upload

6. 公開する ( FTP )

gulp.src('./public/**') .pipe(ftp({

host: 'example.com', user: 'hoto', pass: '1234'

}));

• gulp-ftp

7. SNS で拡散する

var oauth = { consumerKey: '...', ...

}; gulp.src('package.json')

.pipe(twitter(oauth, 'ブログ更新!!!'));

• gulp-twitter

その他

• gulp-favicons: favicon などをまとめて生成

• gulp-fontmin: フォントのサブセットを作成

• gulp-robots: robots.txt を生成

• gulp-email: メールを送る

DEMO

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

まとめ

• ブログは gulp で作れる！！！

Enjoy!!!

Technology

gulp芸