Gulp De wordpress in WordBench

Gulp De wordpress in WordBench

• 1.
  Gulp de WordPress Let’s Start!! in WordBench Tokyo
• 2.
  self-introduction TickleCode
• 3.
  What’s Gulp? •タスクランナー The streameing build system • ビルドツール • Node.js製 • 設定ファイルを、JavaScriptで記述する ことができる！(CoffeeScriptでもOK) • 基本的に非同期で実行
• 4.
  Whatcha gonna dofor me? • Webサーバー/ライブリロード（browser-sync） • Sass、Compass、CoffeeScript、Jadeなどのコンパイル • 画像圧縮（gulp-imagemin） • CSSスプライト生成 • 画像サイズ変換（gulp-image-resize） • コードの圧縮（gulp-minify-html） • コード構文チェック Lint
• 5.
  browser-sync • HTML、PHP、JS、CSSの変更が即座に ブラウザに反映される。 • chrome、safari、firefox、タブレット等、 一つのブラウザに対する操作を他のブラウザに も同期される。例えば、スクロールとか、フォー ムに対する入力なども同期される。
• 6.
  set up ■node.jsのインストール １）リポジトリ追加（64bit） rpm -ivh http://ftp.riken.jp/Linux/fedora/ epel/6/x86_64/epel-release-6-8.noarch.rpm ２）yumでインストール yum install nodejs npm --enablerepo=peel ■gulpのインストール ３）npm install -g gulp CentOS6.5
• 7.
  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を実行。
• 8.
  setting files STEP2：gulpfile.jsの作成 ・ビルド方法を、 　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' })); }); ・Node.jsのStream APIを使って並列実行されるため、 　Gruntより素早く動作します。（※同期実行も可能）
• 9.
  bakusoku WordPressテーマの、 sassコンパイル、minify、自動ロードまでを Gulpで自動化すると 爆 速 になれるかも！？
• 10.
  WordCamp Tokyo 2014 アンカンファレンス、来てね♪ ThankYou！