gulp de wordpress in wordbench
DESCRIPTION
WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう!!」で、タスクランナーツールのGulpについてLTをさせていただきました。browser-syncなどについても紹介しています。TRANSCRIPT
Let’s Start!!
Gulp de WordPress
in WordBench Tokyo
self-introduction
TickleCode
What’s Gulp?• タスクランナー
The streameing build system
• ビルドツール
• Node.js製
• 設定ファイルを、JavaScriptで記述することができる!(CoffeeScriptでもOK)
• 基本的に非同期で実行
Whatcha gonna do for me?
• Webサーバー/ライブリロード(browser-sync)
• Sass、Compass、CoffeeScript、Jadeなどのコンパイル
• 画像圧縮(gulp-imagemin)
• CSSスプライト生成
• 画像サイズ変換(gulp-image-resize)
• コードの圧縮(gulp-minify-html)
• コード構文チェック Lint
browser-sync
• HTML、PHP、JS、CSSの変更が即座にブラウザに反映される。
• chrome、safari、firefox、タブレット等、一つのブラウザに対する操作を他のブラウザにも同期される。例えば、スクロールとか、フォームに対する入力なども同期される。
set up■node.jsのインストール
1)リポジトリ追加(64bit) rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
■gulpのインストール
2)yumでインストール yum install nodejs npm --enablerepo=peel
3)npm install -g gulp
CentOS6.5
setting files{ "name": "twentyfourteen", "version": "1.0.0", "dependencies": {}, "devDependencies": { "gulp": "~3.8.7", "gulp-autoprefixer": "0.0.6", ̶ 省略 ̶ "gulp-minify-css": "~0.3.0", "gulp-rename": "~0.2.2", "gulp-ruby-sass": "~0.3.0", "gulp-compass": "~1.1.8" } }
STEP1:最初にnode.jsの パッケージを管理する package.jsonを作成して npm installを実行。
setting filesSTEP2:gulpfile.jsの作成
・Node.jsのStream APIを使って並列実行されるため、 Gruntより素早く動作します。(※同期実行も可能)
・ビルド方法を、 JavaScriptで 記述していきます。
gulp.task('stylesheets', function() { return gulp.src('assets/stylesheets/*.sass') .pipe(plugins.compass({ sass: 'assets/stylesheets', image: 'assets/images' })) .pipe(plugins.minifyCss({ keepSpecialComments: 1 })) .pipe(gulp.dest('./')) .pipe(plugins.livereload(server)) .pipe(plugins.notify({ message: 'Styles task complete' })); });
bakusoku
WordPressテーマの、 sassコンパイル、minify、自動ロードまでを
Gulpで自動化すると になれるかも!?爆速
ThankYou!
WordCamp Tokyo 2014 アンカンファレンス、来てね♪