月: 2016年10月

9月22日、秋分の日、ファーストサーバーさんで開かれたWordBench大阪に行ってきました。
scssがすごいという話を聞いていたので、gulpを使ってタスクを記述するといった、 イマドキのWeb開発のフローに挑戦！
忘れないうちにブログに書いておきます。
先ず、事前にNode.jsのインストール。前回、インストールするのにシックハックしたのでこれはインストール済みと解釈。ブログをググってGulpを調べると、ローカル環境でもインストールの記述があり、？？？？なんだろう。行けばわかるかとスルー。
登壇者はYasui Risaさん。
当日のスライド
https://docs.google.com/presentation/d/136ELj-ll34WecyyfyhDfacKhcg1GJbom05y-VAnwY5s/edit?usp=sharing

1. 1. ローカル環境にWordPress を準備。
      覚えたWockerの出番です。
      Wockerでローカル環境を作り、
      $ wocker run –name=” [コンテンツ名] “ であっという間にWordPressをインストール。
   2. GulpのメリットSassを自動でコンパイル（変換）。
      Sassだけでもcssが簡単に書けるので楽になるのに、その上、Gulpで自動でコンパイルするらしい。そんな素晴らしい！
   3. Sass（SCSS）について
      Sassは変数や入れ子が使えてcssに一括でコンパイルするようなものです。だから、cssの記述が簡単に行えるような仕組みらしい。
      Sassには2種類あり、SCSSがもう一方。皆さんの話を聞くと、Sassの方が簡単らしい。
      SCSS（Sassy CSS）.scssの拡張子を持ち、CSS3の構文を拡張したもの。これからはSCSS。
      Sassとは.sassの拡張子を持ち、CSSを書くのに、より簡潔な方法を提供。SCSSよりも、読みやすく、また、速く書けると言われる。
   4. Sass（SCSS）はブラウザは読めません。そこでcssにするためにGulpを使います。

1. Gulpについて
   Node.jsのStreamAPIを利用したビルドシステム
   Sassなどを自動でコンパイル
   コードを書き換えたらブラウザを自動で更新。ファイルを圧縮　等々
   手作業ではとても大変な事を自動でやってくれます。

Gulpを使ってみよう！

1. 1. ローカル環境にインストールしたWordPressのファイルの中のwp-content→themes→twentysixteen→gulp-testフォルダを作ります。
   2. $ cd 作ったgulp-testフォルダにフォルダパス又はフォルダをドラッグドロップで移動する
   3. $ npm init インストール、enterで進む
   4. $ sudo npm install gulp -g でGulpをインストール、又は$ npm install gulp –save-devでローカルGulpをインストール
   5. $ touch gulpfile.jsでgulpfile.jsファイルを作成。これで準備完了

タスクを書こう！

1. gulpfile.jsに「var gulp = require(‘gulp’);」Gulpを使いますと宣言。
2. gulp.task(“タスク名”,function(){
   タスクの内容
   });
   今回は
   var gulp = require(‘gulp’);
   var sass = require(‘gulp-sass’);
   var browserSync = require(‘browser-sync’).create();
   と書いて行きます。
   たぶん、Gulpでsass を書いて変換してブラウザで表示するようにします。のような意味。
3. 次に
   gulp.task(“sass”,function(){
   gulp.src(‘./sass/common.scss’)
   .pipe(sass())
   .pipe(gulp.dest(‘./css’));
   });gulp.task(“watch”,function(){
   gulp.watch([‘./sass/*.scss’],[‘sass’,’bs-reload’]);
   });
   と書く。たぶん、common.scssを見て、common.cssに変換して書きなさいという意味。
4. 最後に
   //startes.server
   gulp.task(‘browser-sync’,function() {
   browserSync.init({
   proxy: “http://10.0.23.16/”
   });
   });
   gulp.task(‘bs-reload’,function() {
   browserSync.reload();
   });gulp.task(‘default’,[‘watch’,’browser-sync’]);
   おまけで瞬時にブラウザに反映されるようタスクの書き方を伝授していただきました。
5. 終了はこのままフォルダをテキストエディタで閉じ、ターミナルを終了すればOKです。
   次回、作業を継続する場合、$ cd で gulp-test フォルダに移動し、Gulpをインストールします。すると、作業を継続出来るようになります。さらに使いこなしたい方は引き続きプログラミングを勉強しましょう。因みに私は
   $ sudo npm i -g gulp とターミナルで打ち込みました。間違っていたら、ご指摘お願いいたします。

今回の感想

WordBench大阪のモデレータの方も変わり、前年度は参加するだけで緊張の日々でした。顔見知りの方もでき、課題に集中できるようになって来ました。移り変わりの激しい業界ですので、機会を大切に学んで行きたいものです。今回もお世話になったモデレーターの方々、ありがとうございます。