Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Yeoman で Gulp環境をさらっと作る / gulp+yeoman

Avatar for matsuo matsuo
September 26, 2015

Yeoman で Gulp環境をさらっと作る / gulp+yeoman

2015.09.26 関西フロントエンドUGでの発表資料です

Avatar for matsuo

matsuo

September 26, 2015
Tweet

More Decks by matsuo

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • ·͓ͭ ͻΖ͠ (TAM inc.) • PHP / JavaScript

    / Tech Direction • PHPΧϯϑΝϨϯεؔ੢ ελοϑ • CoffeeScript ޷͖ͩͬͨͷͰ
 ͍·࿏಄ʹ໎͍ͬͯΔ
  2. Yeoman • ϑϩϯτΤϯυͷ։ൃ؀ڥͷ
 φΠεͳ਽ܗΛ४උͯ͘͠ΕΔπʔϧ • ίϚϯυ1ൃͰɺ͙͢։ൃʹ͔͔ΕΔ؀ڥ͕Ͱ͖Δ
 (Grunt / Gulp /

    Bower / npm ͋ͨΓΛۦ࢖) • for AngularJS, React, Polymer, WordPress ͳͲͳͲ • ຊ೔͸ Yeoman ͷ gulp-webapp Λ঺հ
  3. Yeoman gulp-webapp Λ࢖͏ͱ • ʮgulp Ͱ΢ΣϒαΠτ੍࡞ʯͷ؀ڥߏஙΛ
 ͯ͘͠ΕΔ • Yo ίϚϯυ

    1ͭͰɺ͋ͬͱ͍͏·ʹ
 gulp ؀ڥͰ͖͕͋Γ • gulpfile ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ࢖͑Δ
  4. gulpfile.babel.js ͷத਎ • watch • browser_sync • SCSS • autoprefixer

    • babel • ESLint • sourcemap • mocha • Ϗϧυ ( /dist ʹग़ྗ) • HTML/CSS minify • uglify • imagemin
  5. ࢖͍ํ΋γϯϓϧ • gulp serve watch & live reload • gulp

    serve:test ςετ • gulp build Ϗϧυ • gulp serve:dist Ϗϧυ݁ՌΛ֬ೝ