Download to read offline
Recommended
More Related Content
What's hot
Viewers also liked
Similar to gulp芸
![[JavaScript][gulp.js] 一緒に楽しよう！gulp.jsのあれこれ](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f2220gulpjs20160122-160219073056-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More from Yuki Ishikawa
gulp芸
- 1.gulp 芸2015/10/28 Gotanda.js#1@hoto17296
- 3.
- 4.gulp.js• タスクランナー• Node.jsの Stream API
- 5.
- 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.
- 15.1. なにはともあれ Markdown•gulp-markdowngulp.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: 'MyNew Blog!!!',layout: './src/_layout/default.jade'}))• gulp-layout
- 18.4. メタ情報をレイアウトに渡すgulp.src('./src/**/*.md').pipe(frontMatter()).pipe(markdown()).pipe(layout(function(file) {returnfile.frontMatter;}))• gulp-frontmatter
- 19.
- 20.
- 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 で拡散するvaroauth = {consumerKey: '...',...};gulp.src('package.json').pipe(twitter(oauth, 'ブログ更新!!!'));• gulp-twitter
- 25.その他• gulp-favicons: faviconなどをまとめて生成• gulp-fontmin: フォントのサブセットを作成• gulp-robots: robots.txt を生成• gulp-email: メールを送る
- 26.
- 27.
- 28.まとめ• ブログは gulpで作れる！！！
- 29.