Submit Search
Upload
Gulp ことはじめ
•
4 likes
•
1,684 views
Kyohei Morimoto
Follow
2014年の4月か5月くらいのLTで使った資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
Docker+CoreOS+GCEで自動スケール分散レイトレ
Docker+CoreOS+GCEで自動スケール分散レイトレ
peryaudo
React
React
卓馬 三浦
How To Drink Wsgi
How To Drink Wsgi
Atsushi Odagiri
Docker入門
Docker入門
Shiojiri Ohhara
Outputz.vim
Outputz.vim
ryota ichie
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
知己 久保
らくちん Go言語
らくちん Go言語
株式会社YEBIS.XYZ
Recommended
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
Docker+CoreOS+GCEで自動スケール分散レイトレ
Docker+CoreOS+GCEで自動スケール分散レイトレ
peryaudo
React
React
卓馬 三浦
How To Drink Wsgi
How To Drink Wsgi
Atsushi Odagiri
Docker入門
Docker入門
Shiojiri Ohhara
Outputz.vim
Outputz.vim
ryota ichie
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
知己 久保
らくちん Go言語
らくちん Go言語
株式会社YEBIS.XYZ
Puppetのススメ
Puppetのススメ
Gosuke Miyashita
Clack meetup #1 lt
Clack meetup #1 lt
Atsushi Odagiri
QtとC++でGUIプログラミング
QtとC++でGUIプログラミング
seanchas_t
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
yoshioka_cb
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
Shota TAMURA
Docker Machineを始めるには?
Docker Machineを始めるには?
Masahito Zembutsu
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Masayuki Maekawa
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
Fabricによるcloud stackインストール自動化
Fabricによるcloud stackインストール自動化
hiroyuki nakajima
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Takeshi Komiya
Introduction pp.js
Introduction pp.js
Mizushima Kazuhiro
Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方
Kamimura Taichi
ChefとPuppetの比較
ChefとPuppetの比較
Sugawara Genki
Apache Auroraの始めかた
Apache Auroraの始めかた
Masahito Zembutsu
Grunt入門
Grunt入門
Tsuyoshi Maeda
Colabをshellから使う
Colabをshellから使う
Kiyoshi SATOH
Webサーバの性能測定
Webサーバの性能測定
Ryo Maruyama
Puppet on AWS
Puppet on AWS
Sugawara Genki
Ansible ではじめるインフラのコード化入門
Ansible ではじめるインフラのコード化入門
Sho A
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
Shoei Takamaru
More Related Content
What's hot
Puppetのススメ
Puppetのススメ
Gosuke Miyashita
Clack meetup #1 lt
Clack meetup #1 lt
Atsushi Odagiri
QtとC++でGUIプログラミング
QtとC++でGUIプログラミング
seanchas_t
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
yoshioka_cb
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
Shota TAMURA
Docker Machineを始めるには?
Docker Machineを始めるには?
Masahito Zembutsu
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Masayuki Maekawa
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
Fabricによるcloud stackインストール自動化
Fabricによるcloud stackインストール自動化
hiroyuki nakajima
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Takeshi Komiya
Introduction pp.js
Introduction pp.js
Mizushima Kazuhiro
Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方
Kamimura Taichi
ChefとPuppetの比較
ChefとPuppetの比較
Sugawara Genki
Apache Auroraの始めかた
Apache Auroraの始めかた
Masahito Zembutsu
Grunt入門
Grunt入門
Tsuyoshi Maeda
Colabをshellから使う
Colabをshellから使う
Kiyoshi SATOH
Webサーバの性能測定
Webサーバの性能測定
Ryo Maruyama
Puppet on AWS
Puppet on AWS
Sugawara Genki
Ansible ではじめるインフラのコード化入門
Ansible ではじめるインフラのコード化入門
Sho A
What's hot
(20)
Puppetのススメ
Puppetのススメ
Clack meetup #1 lt
Clack meetup #1 lt
QtとC++でGUIプログラミング
QtとC++でGUIプログラミング
kunibiki.rb #5 発表資料
kunibiki.rb #5 発表資料
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
Docker Machineを始めるには?
Docker Machineを始めるには?
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Gruntの罪と罰
Gruntの罪と罰
Fabricによるcloud stackインストール自動化
Fabricによるcloud stackインストール自動化
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Chef の気まぐれ環境構築 〜季節の Capistrano を添えて〜 #jawsug
Introduction pp.js
Introduction pp.js
Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方
ChefとPuppetの比較
ChefとPuppetの比較
Apache Auroraの始めかた
Apache Auroraの始めかた
Grunt入門
Grunt入門
Colabをshellから使う
Colabをshellから使う
Webサーバの性能測定
Webサーバの性能測定
Puppet on AWS
Puppet on AWS
Ansible ではじめるインフラのコード化入門
Ansible ではじめるインフラのコード化入門
Viewers also liked
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
Shoei Takamaru
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
Narami Kiyokura
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
Jun-ichi Sakamoto
秒速一億円
秒速一億円
Shumpei Shiraishi
Reactive Programming
Reactive Programming
maruyama097
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
Filipe Falcão
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
Jun-ichi Sakamoto
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Jun-ichi Sakamoto
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
Jun-ichi Sakamoto
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
Akira Inoue
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
Jun-ichi Sakamoto
TypeScript And ALM
TypeScript And ALM
Kazushi Kamegawa
Viewers also liked
(20)
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
はじめにことばありき
はじめにことばありき
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
秒速一億円
秒速一億円
Reactive Programming
Reactive Programming
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
20130921レジュメ2
20130921レジュメ2
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
変身×フランツ・カフカ
変身×フランツ・カフカ
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
TypeScript And ALM
TypeScript And ALM
Similar to Gulp ことはじめ
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
とある帽子の大蛇料理Ⅱ
とある帽子の大蛇料理Ⅱ
Masami Ichikawa
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Capistrano
Capistrano
Yasuharu Fukuda
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
Gradle a new Generation Build Tool
Gradle a new Generation Build Tool
Shinya Mochida
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Toshimichi Suekane
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
5mingame2
Gws 20130315 gradle_handson
Gws 20130315 gradle_handson
Nobuhiro Sue
Webサーバ勉強会4 nginx で php-fpm を動かしてみた
Webサーバ勉強会4 nginx で php-fpm を動かしてみた
do_aki
emc++ chapter32
emc++ chapter32
Tatsuki SHIMIZU
0621 ndk game
0621 ndk game
cat kaotaro
Nseg20120929
Nseg20120929
hiro345
Fluentdでログを集めてGlusterFSに保存してMapReduceで集計
Fluentdでログを集めてGlusterFSに保存してMapReduceで集計
maebashi
KVM+cgroup
KVM+cgroup
(^-^) togakushi
Gstreamer Basics
Gstreamer Basics
Seiji Hiraki
Personal Cloud Automation
Personal Cloud Automation
Etsuji Nakai
Similar to Gulp ことはじめ
(20)
jsCafe v13 Grunt
jsCafe v13 Grunt
とある帽子の大蛇料理Ⅱ
とある帽子の大蛇料理Ⅱ
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Capistrano
Capistrano
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Gradle a new Generation Build Tool
Gradle a new Generation Build Tool
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
Gws 20130315 gradle_handson
Gws 20130315 gradle_handson
Webサーバ勉強会4 nginx で php-fpm を動かしてみた
Webサーバ勉強会4 nginx で php-fpm を動かしてみた
emc++ chapter32
emc++ chapter32
0621 ndk game
0621 ndk game
Nseg20120929
Nseg20120929
Fluentdでログを集めてGlusterFSに保存してMapReduceで集計
Fluentdでログを集めてGlusterFSに保存してMapReduceで集計
KVM+cgroup
KVM+cgroup
Gstreamer Basics
Gstreamer Basics
Personal Cloud Automation
Personal Cloud Automation
Recently uploaded
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
Recently uploaded
(7)
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
Gulp ことはじめ
1.
Gulpことはじめ Kyohei Morimoto
2.
Gruntの複雑化 • Gruntは色々できそう! • みんなでプラグインをいっぱい作った! •
おれのかんがえるさいきょうgruntfileが乱立 • gruntfileの複雑化 – 管理できない、読めない – 動作が重くなる • Gulpの誕生
3.
“Speed. Efficiency. Simplicity.”
4.
Gulpの始め方 sudo npm install
-g npm sudo npm install -g gulp npm init npmのアップデート gulpのインストー ル package.jsonの作成(もちろん手動でもOK)
5.
Gulpの始め方 sudo npm install
gulp@x.x.x --save- dev x.x.xのところは、インストールしたCLIのバージョン に 合わせる
6.
gulpfile.jsを書く(タスクを書く) • 基本的な流れはgruntと一緒 1. 読み込むプラグインを最初に記述 2.
行いたい処理を書く(sassのコンパイルとか) 3. 作ったものを実行する
7.
gulpfile.jsを書く(タスクを書く) • 基本的な流れはgruntと一緒 1. 読み込むプラグインを最初に記述 2.
行いたい処理を書く(sassのコンパイルとか) 3. 作ったものを実行する
8.
処理の書き方 stream形式で書く
9.
!?
10.
streamについて • gulp開発者達による解説書があります • 詳しくは、substack's
stream handbook
11.
streamについて • gulp.src() //操作するファイルを指定する •
.pipe(プラグイン名) //行いたい処理を書く • .pipe(gulp.dest()); //出力したいファイルを しているする
12.
sassのコンパイル var gulp =
require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
13.
sassのコンパイル var gulp =
require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
14.
sassのコンパイル var gulp =
require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
15.
sassのコンパイル var gulp =
require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
16.
sassのコンパイル var gulp =
require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
17.
VS
18.
プラグイン数 2,828 669
19.
プラグイン数 • この2カ月でGulpのプラグイン数は倍になっ ている • 大抵フロントエンドでやりたいことは、全然で きるから大きな無い
20.
実行処理 • gulpは早いらしい! だが、体感ではそれほど分からなかった! “By harnessing
the power of node's streams you get fast builds that don't write intermediary files to disk. - gulpjs.com” • GruntもV0.5で早くなるっぽい https://github.com/gruntjs/grunt-docs/blob/master/Roadmap.md
21.
設定ファイルの複雑さ • CSS – オートプレフィックス –
ファイルの結合 – 圧縮 • 画像 – 圧縮 • ファイルの監視
22.
Gruntの場合
23.
module.exports = function(grunt)
{ grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); };
24.
module.exports = function(grunt)
{ grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); }; 67行
25.
Gulpの場合
26.
var gulp =
require('gulp'); var concat = require('gulp-concat'); var prefixer = require('gulp-autoprefixer'); var minify = require('gulp-minify-css'); var imagemin = require('gulp-imagemin'); var plumber = require('gulp-plumber'); gulp.task('css', function () { gulp.src('htdocs/css/**/*.css') .pipe(plumber()) .pipe(prefixer('last 2 version')) .pipe(concat('style.min.css')) .pipe(minify()) .pipe(gulp.dest('htdocs/dist/css')); }); gulp.task('img', function () { gulp.src('htdocs/img/**/*') .pipe(plumber()) .pipe(imagemin()) .pipe(gulp.dest('htdocs/dist/img')); }); gulp.task('watch', function () { gulp.watch('htdocs/css/**/*', ['css']); gulp.watch('htdocs/img/**/*', ['img']); }); gulp.task('default', ['css', 'img']);
27.
module.exports = function(grunt)
{ grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); }; 29行
28.
結局どうなのよ • 思っていたよりずっと使いやすい • 処理が圧倒的に見やすい •
チームメンバーによっては導入してみても良 いかも • ビルドツールはあくまで手段なので、 目的に合わせて選択をする
29.
Thank you for
your listening.
Download now