Enviar pesquisa
Carregar
jsCafe v13 Grunt
•
31 gostaram
•
5,251 visualizações
Shinya Sugo
Seguir
jsCafe v13で発表した Grunt のビギナーズ向けのスライドです。 間違い・不明点があれば連絡してもらえれば直します。
Leia menos
Leia mais
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 48
Baixar agora
Baixar para ler offline
Recomendados
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加!ハンズオン(2017/09/05講演)
【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加!ハンズオン(2017/09/05講演)
PlayCanvas運営事務局
【GTMF2017】PlayCanvas新機能( 2017/6/30,7/14講演)
【GTMF2017】PlayCanvas新機能( 2017/6/30,7/14講演)
PlayCanvas運営事務局
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
gulp勉強会@IVP
gulp勉強会@IVP
Daisuke Onoe
Mais conteúdo relacionado
Mais procurados
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
kidach1
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Jun-ichi Sakamoto
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Toshimichi Suekane
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
ksimoji
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
BaseScriptについて
BaseScriptについて
Kiyotaka Oku
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
Kazuki Tsutsumi
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
Toshimichi Suekane
Grunt入門
Grunt入門
Tsuyoshi Maeda
Babelで先取り次世代javascript
Babelで先取り次世代javascript
Tsuyoshi Maeda
Goで作って配布するAzureコマンドラインユーティリティ
Goで作って配布するAzureコマンドラインユーティリティ
yaegashi
Type scriptmemo
Type scriptmemo
ytanno
Nuxt0501ver1
Nuxt0501ver1
卓馬 三浦卓馬
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
Kazuhiro Hara
入門ClojureScript
入門ClojureScript
sohta
Mais procurados
(20)
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
BaseScriptについて
BaseScriptについて
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
React VR ことはじめ
React VR ことはじめ
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
Grunt入門
Grunt入門
Babelで先取り次世代javascript
Babelで先取り次世代javascript
Goで作って配布するAzureコマンドラインユーティリティ
Goで作って配布するAzureコマンドラインユーティリティ
Type scriptmemo
Type scriptmemo
Nuxt0501ver1
Nuxt0501ver1
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
入門ClojureScript
入門ClojureScript
Semelhante a jsCafe v13 Grunt
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
Gruntを導入しよう!の話
Gruntを導入しよう!の話
Koji Nakamura
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
Shota TAMURA
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
Grailsのススメ(仮)
Grailsのススメ(仮)
Tsuyoshi Yamamoto
シラサギハンズオン 1015 1016
シラサギハンズオン 1015 1016
Yu Ito
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略
Hiroshi SHIBATA
Server side Swift & Photo Booth
Server side Swift & Photo Booth
LINE Corporation
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
Osamu Monoe
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
Masahito Zembutsu
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Toshimichi Suekane
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
Hcmtg 1407
Hcmtg 1407
Tomoki Kobayashi
説明資料
説明資料
Tomoki Kobayashi
Db2 Warehouse Spark利用ガイド チュートリアル編
Db2 Warehouse Spark利用ガイド チュートリアル編
IBM Analytics Japan
Semelhante a jsCafe v13 Grunt
(20)
Gulp ことはじめ
Gulp ことはじめ
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
Gruntを導入しよう!の話
Gruntを導入しよう!の話
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Grailsのススメ(仮)
Grailsのススメ(仮)
シラサギハンズオン 1015 1016
シラサギハンズオン 1015 1016
成長を加速する minne の技術基盤戦略
成長を加速する minne の技術基盤戦略
Server side Swift & Photo Booth
Server side Swift & Photo Booth
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
今だからこそ知りたい Docker Compose/Swarm 入門
今だからこそ知りたい Docker Compose/Swarm 入門
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Gruntの罪と罰
Gruntの罪と罰
Hcmtg 1407
Hcmtg 1407
説明資料
説明資料
Db2 Warehouse Spark利用ガイド チュートリアル編
Db2 Warehouse Spark利用ガイド チュートリアル編
jsCafe v13 Grunt
1.
GRUNT jsCafe vol.13
2.
Grunt Grunt は NodeJS
で動く自動化ツールです。 プラグインとして配布されているタスクを インストールする事でさまざまな作業を自動化す る事が出来ます。 SASS、CoffeeScript、ファイル操作 画像操作、ファイル監視、などをファイル形式に とらわれず、まとめて自動化できる事が最大の利点 です。
3.
今日お話する事 •First Step •Grunt Install •タスク設定 •タスク実行パターン •Next
Step •Grunt API •grunt-init •grunt-init install •grunt-init を使う •Tasks •grunt-contrib-* •その他のプラグイン •Grunt を使ってみて
4.
First Step
5.
Grunt Install Grunt は
grunt-cli と grunt の本体両方が必要 # The Grunt command line interface. $ npm install -g grunt-cli
6.
タスク設定 1. npm パッケージ定義ファイルの準備 2.
Grunt 本体とタスクをインストール 3. タスクを管理する定義ファイルの準備
7.
タスク設定 1. npm パッケージ定義ファイルの準備 2.
Grunt 本体とタスクをインストール 3. タスクを管理する定義ファイルの準備 package.json
8.
タスク設定 1. npm パッケージ定義ファイルの準備 2.
Grunt 本体とタスクをインストール 3. タスクを管理する定義ファイルの準備 package.json npm install
9.
タスク設定 1. npm パッケージ定義ファイルの準備 2.
Grunt 本体とタスクをインストール 3. タスクを管理する定義ファイルの準備 package.json Gruntfile.js npm install
10.
1. npm パッケージ定義ファイルの準備 package.json
を用意します。 { "name": "My-Project-Name", "version": "0.0.0", "description": "jsCafe GruntJs Startup." } Grunt を使う上でほぼ必須。 とりあえず使うなら name、version、description の 3つくらいあれば良いと思います。
11.
2. Grunt 本体とタスクをインストール #
Grunt 本体 のインストール $ npm install grunt --save-dev [-D] # Grunt Plugin のインストール $ npm install <PackageName> --save-dev [-D] --save-dev もしくは -D オプションでインストールし package.json に依存ファイルとして一緒に定義します。
12.
3. タスクを管理する Gruntfile.js
の準備 Gruntfile.js もしくは Gruntfile.coffee を用意します。 これも 3 Step で編集します。 1. grunt.initConfig( <Configs> ) タスク毎の設定。 2. grunt.loadNpmTasks( <GruntTackName> ) プラグインの読み込み。 3. grunt.registerTask( <TaskName>, [ <Task> ]) タスクの順番を定義
13.
Gruntfile.js - 1
/ 2 •親タスク : Gruntプラグインを指定する。 •子タスク : 小分けにタスクを設定できる。 module.exports = function(grunt){ ! grunt.initConfig({ ! ! concat:{ ! ! ! dist:{ ! ! ! ! src: ['foo.js' , 'bar.js'], ! ! ! ! dest: 'main.js' ! ! ! } ! ! } ! }); ! // ... 続く
14.
Gruntfile.js - 2
/ 2 ! // ... 続き... ! // タスクプラグインを読み込む ! grunt.loadNpmTasks('grunt-contrib-concat'); ! // Default のタスクを定義します ! grunt.registerTask('default', ['concat']); ! // 他にもタスクは定義できる。 ! grunt.registerTask('foo', ['concat:dist']); };
15.
タスク実行パターン タスク実行の 3 パターン指定方法がある。 #
default タスク $ grunt # concat タスク (親タスク) $ grunt concat # concat => dist タスク (子タスク) $ grunt concat:dist
16.
Next Step
17.
Grunt API Grunt API
を利用すると テンプレートエンジン ( include Lo-Dash )や JSON, YAML などのデータ・フォーマット などもGruntのみで扱える。 他にもタスクに別名をつけるとか便利なAPIがある http://gruntjs.com/api/grunt
18.
Grunt API で動的バナーを追加する
- 1 / 3 grunt.initConfig({ ! // pkg プロパティにpackage.jsonの内容をインポートする ! pkg: grunt.file.readJSON('package.json'), ! // banner プロパティにテンプレートを埋め込む ! banner: '/**n'+ ! '* Name: <%= pkg.name %>n'+ ! '* Version: <%= pkg.version %>n'+ ! '* Description: <%= pkg.description %>n'+ ! '* Date: <%= grunt.template.today("yyyy-mm-dd") %>n'+ ! '*/n', ! // 続く...
19.
Grunt API で動的バナーを追加する
- 2 / 3 ! // ... 続き ... ! concat: { ! ! options: { ! ! ! // banner プロパティの読み込み ! ! ! banner: '<%= banner %>n' ! ! }, ! ! dist: { ! ! ! src: ['foo.js', 'bar.js'], ! ! ! dest: 'main.js' ! ! } ! } });
20.
Grunt API で動的バナーを追加する
- 3 / 3 タスクが実行される度に日付やバージョンなど更新される。 # 出力結果 /** * Name: My-Project-Name * Version: 0.0.0 * Description: jsCafe Gruntjs Startup. * Date: 2013-08-25 */ // foo.js // bar.js
21.
Grunt API Config のオブジェクトに値を渡す事が出来て テンプレートを使って値を使える。 package.json
や他言語の コンフィグファイル compass の config.yaml などの設定データも Gruntfile に使える。 そして、Gruntfile 自体も再利用できる。
22.
Watch 以前、grunt-contrib-livereload を紹介している ブログなどがありました。 が、LiveReload 機能が
grunt-contrib-watch に 統合され、grunt-contrib-livereload は非推奨に なりました。 では基本的な watch 設定方法を見てみましょう。
23.
ポイントは子タスクを指定するところです。 less: { ! dist:
{ ! ! files: { "css/*.css": "css/*.less" } ! } }, watch: { ! options: { ! ! livereload: true // リロード有効になります ! }, ! less_files: { ! ! files: 'css/*.less', ! ! tasks: ['less:dist'] //lessの子タスクを指定 ! } grunt-contrib-watch - 1 / 2
24.
Gruntfileの設定が終われば ブラウザ用の LiveReload プラグイン もしくは、 HTMLにスクリプトを埋め込みます。 <script
src="http://localhost:35729/livereload.js"></script> grunt-contrib-watch - 2 / 2
25.
grunt-init Scaffolding
26.
grunt-init Install Gruntプロジェクトのひな形 ユーティリティ Gruntfile
や Grunt プラグインのひな形を管理 http://gruntjs.com/project-scaffolding # grunt-init $ npm install -g grunt-init
27.
grunt-init を使う grunt-init で使うテンプレートをgitからインストールします •grunt-init-gruntfile
: Gruntfile の基本的なひな形 •grunt-init-gruntplugin : Grunt Plugin を作るひな形 •grunt-init-jquery : jQuery Plugin のひな形 テンプレートは ~/.grunt-init ディレクリから読み込む 他にも、指定した Path からも読み込む事が出来ます。
28.
grunt-init を使う # git
clone でテンプレートをインストール $ git clone git@github.com:gruntjs/grunt-init-jquery.git /.grunt-init/jquery # テンプレート名から作成 $ grunt-init jquery $ grunt-init <TemplateName> # 任意のPath を指定して作成 $ grunt-init <Path>
29.
Tasks Grunt タスクあれこれ
30.
Grunt 謹製 タスク https://github.com/gruntjs/grunt-contrib grunt-contrib-*
31.
• grunt-contrib-clean 指定した不要なファイル・ディレクトリの削除 ※ キャッシュファイルの削除とか。 •
grunt-contrib-compress 指定したディレクトリなどを圧縮ファイルとしてアーカイブする • grunt-contrib-concat ファイルを結合 • grunt-contrib-copy ファイル・ディレクトリのコピー ※ altJSからコンパイルした後に指定ディレクトリにコピーするとか ファイルユーティリティ
32.
• grunt-contrib-coffee CoffeeScript ファイルの結合・コンパイル •
grunt-contrib-jshint JSHint • grunt-contrib-requirejs RequireJS プロジェクトのファイル群を r.js で最適化してくれます。 ※ 1ファイルにまとめたり、uglify とか • grunt-contrib-uglify minify してついでに多少難読化できます。 • grunt-contrib-yuidoc YUIDoc で JavaScript のドキュメントを自動生成します。 JavaScript ユーティリティ、altJS コンパイラ
33.
• grunt-contrib-compass SASSのフレームワーク Compass •
grunt-contrib-cssmin CSS ファイルを minify したり、gzip化 します。 • grunt-contrib-csslint CSSLint • grunt-contrib-less LESS のコンパイル • grunt-contrib-sass SASS のコンパイル • grunt-contrib-stylus Stylus のコンパイル スタイルシートユーティリティ、プリプロセッサ
34.
• grunt-contrib-htmlmin Minify HTML •
grunt-contrib-jade Compile Jade files to HTML. • grunt-contrib-handlebars Precompile Handlebars templates to JST file. プリコンパイルファイルの作成 • grunt-contrib-jst Precompile Underscore templates to JST file. プリコンパイルファイルの作成 HTMLユーティリティ、テンプレートエンジン
35.
• grunt-contrib-nodeunit Nodeunit を実行してくれる。 •
grunt-contrib-jasmine PhantomJS を対象とした jasmine テストを実行してくれる。 • grunt-contrib-qunit PhantomJS を対象とした QUnit のブラウザテストを実行してくれる。 テストフレームワーク
36.
• grunt-contrib-imagemin PNG や
JPEG の画像を、OptiPNG, pngquant, jpegtran などで 最適化します。 • grunt-contrib-connect > Node パッケージ connect で Webサーバー を実行します。 • grunt-contrib-watch 指定したファイルの変更を監視して、タスク実行を自動化します。 LiveReload 機能も grunt-contrib-watch のオプションに統合されまし た。それに従い、grunt-contrib-livereload は deprecated (非推奨) に なりました。 その他
37.
More Tasks
38.
Grunt Plugins. -
1 / 3 • grunt-typescript TypeScript のコンパイル • grunt-haxe Haxe から JavaScript へのコンパイル • grunt-karma テストフレームワーク karma の実行 • grunt-csso CSSO CSS Optimizer タスク • grunt-csscomb CSSComb CSSファイルの プロパティ順などを正規化してくれたり色々
39.
Grunt Plugins. -
2 / 3 • grunt-imageoptim 非常に便利な Macアプリ ImageOptim と ImageAlpha のなどの画像最 適化 タスク • grunt-data-uri CSSの中の画像を dataURI に変更して embed するタスク • grunt-jekyll Ruby 製の Static サイト、Blog ジェネレータ jekyll ビルド タスク • grunt-shell シェルコマンド実行 • grunt-include-replace HTMLをインクルードしたり、パラメータ埋め込んだり
40.
Grunt Plugins. -
3 / 3 • grunt-connect-proxy grunt-contrib-connect をベースに、proxy( http-proxy )機能 を追加。 • grunt-express-server Express サーバーをタスクとして立ち上げる。 grunt-express-watch と合わせて使い、app.js などに 変更があった時にサーバーを再起動できる。 • grunt-text-replace テキストファイル中を正規表現置換 • grunt-open 指定したURLをブラウザで開く
41.
More... Grunt を使ってみて...
42.
静的サイト とか Webサイトで大量の静的ファイルをさばく事が多いですが jekyll などのHTMLジェネレーター
+ Grunt + MAMP で 快適環境出来ます。 良く使っている Grunt Plugins • grunt-jekyll • grunt-contrib-coffee • grunt-contrib-copy • grunt-contrib-compass • grunt-contrib-watch • grunt-contrib-concat
43.
Grunt タスクが遅い 最初はファイル数が少ないのでタスク終了まで時間は かからないが、ファイル数が多く実行されるタスクの種 類も多くなると割ともたつく。 解析系やテスト系、コンパイル系のタスクは Grunt
が呼 び出してから起動するものが多いので起動時間を減ら す。 結論、子タスク は沢山あった方がいい。
44.
Grunt タスクを使いこなすポイント 子タスクを種類別に分ける。 ライブラリ系の全体で使われる様な開発時は頻繁に改変 されるCSS、JS、画像などの子タスク ページ毎に必要なCSS、JS、画像などの子タスク この2種類を分けるだけで Watch
した時のパフォーマン スは大幅に変わる
45.
タスクは分散しましょう Lessファイルの種類に応じてビルドを分ける less: { ! libs:
{ /* configs */ }, ! pages: { /* configs */ } }, watch: { ! lib_files: { ! ! tasks: ['less:libs', ...] ! }, ! page_files: { ! ! tasks: ['less:pages', ...] ! } }
46.
他にも HTML や CSS
や JavaScript や 画像 にかぎらず RubyでもPHPでも他の言語ファイルでも Watch でまとめれば一石二鳥。 PHPUnit を実行させるとか PhantomJS でサイト巡回させるとか Vagrant のスターターとか
47.
Grunt は ルーティング可能なタスクマネージャです。 面倒でも計画的に利用しましょう。
48.
おわり @sakunyo
Baixar agora