Download to read offline
![gulpfile.jsの作成
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello gulp!');
});
gulp.task('default', ['hello']);](https://image.slidesharecdn.com/gulpup-150604062436-lva1-app6891/85/gulp-IVP-29-320.jpg)
![[JavaScript][gulp.js] 一緒に楽しよう！gulp.jsのあれこれ](https://cdn.slidesharecdn.com/ss_thumbnails/2220gulpjs20160122-160219073056-thumbnail.jpg?width=640&height=640&fit=bounds)
gulp勉強会@IVP
- 1.
- 2.
- 3.
- 4.
- 5. Sass,Compassなどのコンパイル HTMLからmarkdown,プレーンテキストに変換 CSS中に点在したメディアクエリーをまとめる CSSベンダープリフィックスの管理 CSSプロパティ並び順整理 コードの連結 コードの圧縮 コードの整形 CSSスプライト生成 画像圧縮 markdownをPDFに変換 Webページのスクリーンショット撮影 画像サイズ変換 コード構文チェック Lint ファイル書き出し 圧縮/解凍 FTPアップロード 文字コード変換 実体参照変換 JSON,YAML,XML,PLIST,CSV の相互変換 HTMLテーブルをCSVに変換 サイトマップ作成 sitemap.xml生成 通知センターに通知 これらの作業をまとめて自動化できる！ gulpで自動化できること（一部）
- 6.
- 7.
- 8.
- 9. Node.jsとは（間違いがち） プログラミング言語ではない サーバーソフトではない プログラミング言語のフレームワークではない ※ IISやapacheとは違うが、同じ役割をすることはできる
- 10. Node.jsとは（できること） Javascriptで動く Windowsでも動く サーバーで動く ファイルの読み書きもjavascriptでできちゃう DBとの連携もjavascriptでできちゃう
- 11. Node.jsとは（技術的特徴） 非同期 (I/Oの処理結果を待たず処理を進める) シングルスレッド (メモリ消費が少ないので速い) C/C++プラグインで拡張可能 イベントドリブン ノンブロッキングI/O（コールバック関数処理）
- 12. Node.jsとは（技術的特徴） 非同期 (I/Oの処理結果を待たず処理を進める) シングルスレッド (メモリ消費が少ないので速い) C/C++プラグインで拡張可能 イベントドリブン ノンブロッキングI/O（コールバック関数処理）
- 13. npmについて node.jsのモジュール管理システム install/uninstallをすべてnpmで行う 各モジュールの依存関係を管理してくれる 自分で開発したモジュールも公開できる インストールにはlocalとglobalの２つがある
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. Gruntについて フロントエンドのタスクを自動化するツール プラグインが多数あり、組み合わせることで自動化 gulpより古い 処理の１つの単位を「タスク」と呼ぶため「タスク ランナー」と呼ばれる
- 21. Gruntとgulpの違い Grunt gulp 単一のプラグインを組み合わせる JSONでタスク定義を書く 学習コストが高い プラグインを組み合わせてタスクを作る javascriptで処理をつないでいく 学習コストが低い
- 22. Gruntとgulpの違い Grunt gulp 単一のプラグインを組み合わせる JSONでタスク定義を書く 学習コストが高い プラグインを組み合わせてタスクを作る javascriptで処理をつないでいく 学習コストが低い →オブジェクト指向っぽい →スクリプト言語っぽい
- 23.
- 24.
- 25.
- 26.
- 27. 事前準備（gulpインストール） //global install > npminstall gulp -g //local install //local installは対象のディレクトリで行う > npm install --save-dev gulp
- 28.
- 29. gulpfile.jsの作成 var gulp =require('gulp'); gulp.task('hello', function() { console.log('Hello gulp!'); }); gulp.task('default', ['hello']);
- 30.
- 31.
- 32.
- 33. 使用プラグイン gulp-concat gulp-minify-css gulp-rename npm install --save-dev
- 34. 使用プラグインのインストール npm install –save–dev gulp-concat npm install –save –dev gulp-minify-css npm install –save –dev gulp-rename npm install --save-dev
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. 問題の解決 npm install --save-devrun-sequence 処理実行順を管理できるプラグインを使う ※gulp4.0では実行順序を指定できるAPIが提供される
- 45.
- 46.
- 47. Sass,Compassなどのコンパイル HTMLからmarkdown,プレーンテキストに変換 CSS中に点在したメディアクエリーをまとめる CSSベンダープリフィックスの管理 CSSプロパティ並び順整理 コードの連結 コードの圧縮 コードの整形 CSSスプライト生成 画像圧縮 markdownをPDFに変換 Webページのスクリーンショット撮影 画像サイズ変換 コード構文チェック Lint ファイル書き出し 圧縮/解凍 FTPアップロード 文字コード変換 実体参照変換 JSON,YAML,XML,PLIST,CSV の相互変換 HTMLテーブルをCSVに変換 サイトマップ作成 sitemap.xml生成 通知センターに通知 これらの作業をまとめて自動化できる！ gulpで自動化できること（一部）
- 48.
- 49. StyleDoccoについて Node.jsで作られてるスタイルガイドジェネレーター CSSにMarkDown（Qiitaで使ってる奴）で書いたらHTML出力される gulpのプラグインで自動的に生成させたりできるらしい SassとかLessと組み合わせて使うといいかもね
- 50. StyleDoccoについての感想 CSSファイルが肥大化しそう 納期に追われてる時にそんなん書く余裕なさそう 記述ルール決めないと意味不明になりそう モジュールを可視化できるのはいい すでにあるボタンなどを再作成することがなさそう
- 51.