2018-04-19

はじめてのNode.js 2

Node.js

昨日の続きです。

express-generatorで吐き出されたapp.jsのコードを読んでみたのでまとめてみました。
（以下のソースは全て吐き出されたapp.js上のコードです。）

あと、せっかくなのでHerokuを使ってサーバー公開してみるところまでやってみたので手順をまとめました。

1. expressのapp.js

サーバー起動時に実行するファイル
必要なURL（ルーティング）を決めていく
使用するミドルウェアを設定していく

2. app.set

expressで使うテンプレートエンジンを設定する

var express = require('express');
var path = require('path');
var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

expressとnode.jsのpathモジュールを読み込む
appを用意、ejsを置くディレクトリを決めて、 view engineとして指定する

app.set()
- アプリケーションを必要とする各種の設定情報をセットするためのオブジェクトとメソッド
view engine
- テンプレートエンジンの種類を示す。具体的には第二引数で’ejs’をテンプレートエンジンを使用しているということになる
path.join関数
- 返り値として第1引数以降のパスを順番に結合したパスが得られる
__dirname
- 現在実行中のソースコードが格納されているディレクトリパスが格納されている
  ex) ~/hoge/Foo.js/a.js → ~/hoge/Foo.js

以下がexpressの公式ドキュメントです。app.setのことをもっと詳しく書いてくれてます。
http://expressjs.com/ja/4x/api.html

3. app.use

使うミドルウェアの設定、URLの設定（ルーティング）を行う。
next();が呼ばれる度に実行される。

必要なモジュールを読み込んだり、/や/usersのようにルーティングを記述。

var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');


 // morganを使ってlog出力を行う 
app.use(logger('dev')); 

// body-parserでユーザーのリクエストのbody情報を取得
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); 

// リクエストを受けてcookie情報を取得する
app.use(cookieParser());

// 静的ファイルの場所を指定する。ここでは public/ 以下のファイルが静的ファイルとして設定される
app.use(express.static(path.join(__dirname, 'public')));

// routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行する
app.use('/', routes);
// routes/users.js のルーティング内容を 'http://domain/users' をGETで受け取った時に実行する
app.use('/users', users);

morgan
- logの出力。
  morgan() の引数に文字列を渡すか、format: を指定することで、ログのフォーマットを指定することができる。
body-parser
- HTTPリクエストボディのデータを取得する
express.static
- 静的ファイルの読み込み
  img、CSS ファイル、JavaScript ファイルなど

4. module

//routesというモジュール
var routes = require('./routes/index');

app.use('/', routes);

routes/index.js のルーティング内容を 'http://domain/' をGETで受け取った時に実行

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

. /routes/index.ejsをrenderして返す処理

5. Herokuを使う

herokuとは?

gitでコードを送られると、自動でサーバー公開までやってくれる便利なサービス。

Herokuに登録、Heroku Toolbelをインストール

Heroku

jp.heroku.com

Heroku Toolbel devcenter.heroku.com

Procfileを用意する

Procfileとは？

herokuがこのプロジェクトを起動するときに実行するコマンドを記載している。

Herokuにpush

Herokuにログイン
heroku login
Herokuに新しいアプリケーションを作成
heroku create XXX
Herokuにpushする
git push heroku master
Herokuコマンドでサーバーを起動
heroku ps:scale web=1

6. まとめ

express-generatorで吐き出されたapp.jsの中身を確認。
herokuのリモートリポジトリを使い公開

2018-04-18

はじめてのNode.js 1

Node.js

この間、社内用のテンプレートファイルを作成するにあたってgulpfileを作成していたのですが、謎のエラーに遭遇しました。。。

このエラーが、気になって気になってもやもやしてたのですが、調べてるうちにNode.jsのことを何も分からずに書いてたなあ、と思い勉強したことのまとめです。

1. node.jsとは

javascriptを使ってサーバーサイドのコードを書くことができるプラットフォーム。イベントループモデルで、ノンブロッキングI/Oを使用している。

特長

V8エンジンで動いている
- chromeで使われているJavascriptエンジン
- ブラウザとほぼ同じJavascriptが書ける
イベント駆動
- 何かのきっかけで処理を行う仕組み
ノンブロッキングI/O
- ファイルの読み込みのような時間がかかる処理を非同期に実行ができる
- 処理を詰まらせずにできる

2. node.jsはイベントループなサーバー

WEBサーバの種類

apache →接続ごとにメモリを確保する為、同時リクエスト数に上限がある。

NGINX →イベントループで非同期の為同時リクエストに強い。

イベントループなサーバーだと何がいいの？

多くのユーザーの同時アクセス・大量リクエストを捌きやすい。イベントループで処理を待たずに、イベントが呼ばれるまでループする

node.jsはjavascriptを知っていれば使える。

3. node.jsでwebサーバーを立てる

httpのcreateServerを使います。

var http = requre('http');  //モジュールを読み込む、使う

http.createServer(function(req, res){
    res.writeHead(200, {'content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(3000);

node.jsのモジュール群

http/https
dns
path
fs など

Index | Node.js v8.17.0 Documentation

4. expressを使う

expressとは

Node.jsで一番使われているフレームワーク
スケルトンプロジェクトのジェネレーターもある
基本的な機能はほぼ揃っている

expressで使ったスケルトンサイト作成

グローバルにexpressをインストール
npm install -g express-generator

※「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能
expressアプリケーションの作成
express -e myapp(-eはejs、myappというプロジェクト)
サーバー起動
cd myapp,npm install,npm start

5. サーバーから静的ページ配信

Webサーバーは何してる？

ブラウザからのGETリクエストにレスポンスしてデータを返している

expressでGETする流れ

GETとは?

ブラウザからサイトを見るときに送るHTTPメソッド
他にはPOST / PUT / DELETE がある。用途で分ける

app.get('/newpage', function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

上記コードを詳しく見ていくと、

app.get('/newpage'
ブラウザからどのURLにリクエストが来た時の挙動なのか記述

function(req, res){
    res.render('newpage', {text: 'ejsに文字列を渡す'});
});

コールバック関数のレスポンス(res)で指定ejsファイル名をレンダリングするように記述。このときにテンプレートへ渡す引数があれば引数にいれる

6. まとめ

node.jsはサーバーサイドでJavaScriptを書くことが出来るプラットフォーム
同時アクセスが多く、大量のリクエストがあるサーバー向き
expressを使えばWebアプリ構築が簡単にできる
基本的なサーバはGET / POST などのHTTPメソッドを捌いているだけなので怖くない

2018-03-12

はじめてのVue.js

Vue.js

化粧品案件で診断コンテンツを作るっていうお仕事がありました。スタイルとカラー選択で診断結果が変わるというコンテンツなのですが、選んだスタイルによって選べるカラーの種類が変わるという診断コンテンツです。

いつもはjQueryで書いていたのですが、Vue.jsで書いてみようかなと思い（データの更新の簡素化、記述量を減らしたい）、診断コンテンツ作成前にVue.jsについて簡単にまとめて見ました。

※実装した診断コンテンツの仕組みは今度書くつもりです。。。

1. Vue.jsとは？

MVVMの代表。画面表示とデータ管理するモデルの間をつなぎ、スムーズにデータの更新を行う機能を提供。双方向データバインディングを行う（双方向に接続し、どちらかが更新されるとリアルタイムにもう一方も更新される）

MVVM

「model」「view」「viewmodel」の略。「model」（データの管理、ビジネスロジック）「view」（ユーザーインターフェース）「viewmodel」（ModelからViewへ出力データを渡す、ViewからModelへ入力データを渡す）

2. Vue.jsを使ってみる

はじめてのVue.jsということで

・どうやって文字を表示させるの？
・どうやってdataを変更させるの？
・どうやってイベント処理を書くの？
・クラスのバインドって？

っていうところを今回はまとめています。

※環境設定などは省略してます。。。

1. Vueオブジェクト

まずは文字を表示させてみます。

VueオブジェクトとはVue.jsに用意されているViewModelオブジェクト。 Vueオブジェクトを作成し、データと画面表示を関連づけ、処理していく。

var 変数 = new Vue({　オプション情報　});

el：値を表示する対象のタグ（Element）を指定。タグのID情報を用意。 data：渡す値を用意。この値はオブジェクトとして用意し、その中に値をまとめておく。

これでHello world！という文字が表示される。

【html】
<p id="msg">
    {{ message }}
</P>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！'
    }
});

2. HTML側からVueに値を設定する

HTML側から入力した値をVueオブジェクト側に渡すには？

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="message">
  </div>
</body>

v-model

v-modelはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができます。

v-model="message"はVueのdata内にあるmessageという項目と同期されるようになる。

3. イベントとメソッドの利用

イベント処理の方法

【html】
<body>
  <div id="msg">
    <p>
      {{message}}
    </p>
    <input type="text" v-model="txt１">
    <input type="button" v-on:click="doaction" value="click">
  </div>
</body>

【js】
var initial = new Vue({
    el: '#msg',
    data: {
      message: 'Hello world！',
      txt1: ''
    },
    methods: {
      doaction: function(){
        var str = this.txt１;
        this.message ='you typed: ' + str + '.';
      } 
    }
});

4. methods

Webページ側に割り当てて使われるメソッドをまとめたもの。イベントなどを使ってWebページのタグに割り当てるメソッドは、ここに。

this.txt1は、Vueオブジェクト内に用意されているtxt1の値を示す。data内の値はこのようにthisを使って参照できる。

入力フィールドの値がtxt1にバインド
txt1を取り出すことで、入力フィールドの値が得られる。
その値を加工、messeageに設定
messageに表示される。

5. クラスのバインド

v-bind:class="{クラス名：プロパティ}"

プロパティは、真偽値を扱う。値がtrueならクラスがon、偽ならfalse。

【html】
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>

【css】
.active{
  color:red;
}

公式ガイドを参考に初歩的なところをまとめています。

jp.vuejs.org

今度は実践っていうことで作った診断コンテンツの仕組み部分を忘れないようにまとめようかなあ、と思っています。

2018-01-14

npm-scriptsを使った開発環境

npm

いつもgulpを使って開発をしていたのですが、ハマってしまうとなぜかいつも抜け出せなくて開発環境を整理するだけで時間がかかってしまうことがありました。

もっとシンプルな環境が作れないかなあ、と調べていて見つけたのが、npm-scriptを使った開発環境です。

npm scriptsって？

そもそもnpm scriptsって何だろう？と疑問に思ったのでメモ。

npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。

具体的にどういうことなのかというと

【package.json】

"scripts": {
    "start": "npm run server",
    "server": "browser-sync start --server ./ --port 3000 --files \"./**/*.html,./assets/css/style.css,./assets/js/bundle.js\"",
  },

このpackage,jsonの記述を例にすると

$ npm startでサーバーが立ち上がり、ファイルの監視がはじまります。

このようにシェルスクリプトやエイリアスコマンドを「scripts」というフィールド登録できます。

手順

1. $ npm init
2. $ npm install module名
3. package.jsonのscriptsを編集

実行

$ npm run scripts名 でscirptを実行できます。

この例でいうと$npm run serverでserverが実行されます。

serverはbrowser-syncを使ってローカルサーバーを作って、ファイルの変更を監視オートリロードするタスクです。

予約語

npm-scriptsには予約語が4つあります。それらはrunをつけずに実行できます。さっきの例だと$ npm startで serverタスクが動きます。

$ npm start
　appを起動するようなshell scriptのエイリアスとして用いる。
$ npm restart
　appを再起動させるためのshell scriptのエイリアスとして用いる。
$ npm stop
　appを停止させるためのshell scriptのエイリアスとして用いる。
$ npm test
　appをテストするようなshell scriptのエイリアスとして用いる。

npm-scriptのメリット、デメリット

npm-scriptsのメリット、デメリットをまとめてみます。

メリット

シンプルな開発環境
タスクランナー独自のルールを学習しなくて済む
豊富なnode_modulesを直接叩ける

タスクランナーを使うと、タスクランナーの勉強コストがかかってしまったり、タスクランナー用のnode_modulesの開発が止まったりして、詰まってしまうことがあります。

npm-scriptsだと、package.json だけで設定と処理が完結するのでとてもシンプルです。

デメリット

環境依存
可読性が悪くなる

実際に使ってみて、macでは動くのにWindowsでは動かない問題に直面してしまいました。原因はmacだとUnixのコマンドラインで動作、WindowsだとWindowsのコマンドラインで動作するので同じ記述だと動作しなかったのです。。。記述を変えて解決しました。。。

また、多くのタスクを増やそうとすると、可読性が悪くなります。。。

まとめ

お仕事ではまだ使っていないのですが、npm-scriptsを使った開発環境は気に入っています。

案件によってケースバイケースだなあと思い、今年は、 LPを作る時はnpm-script、ページものを作成する時はgulpを使おうかなあ（ejsを使ったり、複数人で開発のため環境依存や可読性が悪いのはやだなと思ったため）と個人的に考えています。

最後に作った環境をあげておきます。

github.com

2018-01-04

2017年と2018年

日記音楽

書こう、書こうと思って2018年になってしまいました。。。

2017年の音楽のこと、本のこと、お仕事のこと、2018年頑張ることをまとめていこうと思います。

音楽のこと

2017年はずっと音楽を聴いていた気がします。出社してPCをつけてイヤホンをつける、退社してエレベーターに乗ったらイヤホンをつける、家に着いたらPCをつけて音楽をかける。

そんな1年でした。

今年たくさん聴いたなあ、と思うアルバムをとりあえず

Healing

In Love With a Ghost
エレクトロニック
¥1528

たしか春くらいにリリースされて（3月？だったかな）、東京で過ごすはじめての春にたくさん聴きました。

Are You Anywhere [12 inch Analog]

アーティスト:Submerse
発売日: 2017/10/20
メディア: LP Record

前の記事でも書いたけどsubmerseは大好きなので、もう一度。

Jersey Devil

アーティスト:Ducktails
発売日: 2017/10/06
メディア: CD

迷ったんだけど、今年の秋はこのアルバムをよく聴いたので。

WILLOWBANK

アーティスト:YUMI ZOUMA
発売日: 2017/10/04
メディア: CD

10月にリリースされたアルバム。たくさん聴いたのは12月です。

その他に今年たくさん聴いた曲たち

Ｂｅｆｏｒｅ　Ｔｏｄａｙ

アーティスト:THE NOVEMBERS ノベンバーズ
発売日: 2017/09/12
メディア: CD

https://itunes.apple.com/jp/album/i-cant-tell-you-how-much-it-hurts/1312972569?uo=4&at=10l8JW&ct=hatenablog

Thursday - Single

Luby Sparks
オルタナティブ
¥255

1 Hour of Relaxing Zelda: Breath of the Wild Music

NieR Automata OST Full Complete 「ニーアオートマタ Original Soundtrack」

ゲームのサントラを今年はたくさん聴いた気がします...
特にゼルダとニーアオートマタのサントラはすごくよかったです...

去年はあまりライブに行かなかったのですが、2018年はいろんなライブに行ってみたいなあ、と思っています。とりあえず、1/6のsubmerse とTeen Dazeのミニライブには行きたいと思っています。（行ければいいのだけれど。）

本のこと

2017年は小説を読む量が減りました。お仕事を変えたこともあると思うのですが、技術書を読むことが増えた気がします。

とりあえず読んだ小説

朝顔の日

作者:高橋弘希
発売日: 2015/07/31
メディア: 単行本

言葉ひとつひとつがとても綺麗でした。

お目出たき人 (新潮文庫)

作者:実篤, 武者小路
発売日: 1999/12/27
メディア: 文庫

池袋にある梟書茶房で。

楽園のカンヴァス (新潮文庫)

作者:原田マハ
発売日: 2014/06/27
メディア: 文庫

ラストの"夢をみたんだ"っていう言葉が印象的でした。

渦森今日子は宇宙に期待しない。（新潮文庫）

作者:最果タヒ
発売日: 2016/08/26
メディア: Kindle版

かわいくてポップな感じがしました。

グレート・ギャツビー (村上春樹翻訳ライブラリー)

作者:スコットフィッツジェラルド
発売日: 2006/11/01
メディア: 単行本（ソフトカバー）

アメリカンドリーム

気になる本、技術書、漫画

[asin:B075JFVLCK:detail]

星の子

作者:今村夏子
発売日: 2017/06/07
メディア: 単行本

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

作者:山本陽平
発売日: 2010/04/08
メディア: 単行本（ソフトカバー）

きちんと読みたい。

Webフロントエンドハイパフォーマンスチューニング

作者:久保田光則
発売日: 2017/05/26
メディア: 単行本（ソフトカバー）

会社に置いてあるので読みたい

モブ子の恋　1巻 (ゼノンコミックス)

作者:田村茜
発売日: 2017/10/20
メディア: Kindle版

七つの大罪（２８） (週刊少年マガジンコミックス)

作者:鈴木央
発売日: 2017/11/17
メディア: Kindle版

毎週気になる...

お仕事のこと

1年間を振り返ってみると、化粧品案件で診断コンテンツを作ったり、大企業のコーポレートサイトを作成したり、 100ページ規模のサイトをcss設計を含めて作成したり、とても充実した一年になりました。

振り返ると土日も家に帰ってからもコード書いてたなあ、っていう印象です。何かを学ぶのに人の倍しないと覚えられないのでほんとうに辛かったのですが、コードを書くことが楽しくて、何か新しいことができた瞬間が嬉しくて、作ったページを先輩が褒めてくれる瞬間が大好きで 1年間頑張れた気がします。

2017年の目標は、フロントエンドエンジニアとして自信を持って名乗れるように技術力をあげていきたいなあ、と漠然と思っています。

ES6をきちんと書けるようになりたい。
React,Vueでwebアプリを作ってみたい。
ReactNativeでアプリを作ってみたい。
サーバーサイドのことも勉強したい。（PHP）
npm scriptを使った開発環境を完成させたい。

漠然としているけれど、今年は難しいことにも挑戦していきたいです。

2018年

2018年新しくはじめたことなのですが、仮想通貨をはじめてみました。怖くてなかなか始められなかったのですが、やっとはじめました。

とりあえずですが、Zaif、coincheck、Binance、Cryptofolioに登録して少額ですがはじめてみました。

2017年は個人的に仮想通貨、決済システムが大きく変化したなあ、という印象です。

去年気になったのが、Payment Request API です。 developers.google.com

ネットで買い物するときにめんどうな住所の入力、クレカ番号の入力が簡単になるみたいです。

なんだか送金システムのニュースだったり、仮想通貨のニュース記事を見ているといつのまにか、紙のお金が本当にただの紙になってしまう日がきてしまうのかなあ、と感じます。

今年は少しずつですが、資産運用もはじめていきたいと思っています。

今年はすてきな思い出がたくさんとできるといいなあ、

2017-12-10

MAMPを使わずにlocalhostを作る

environment

macに標準でインストールされているApacheとPHPを使ってlocalhostを作ったのでメモです。
せんぱいに教えてもらったのと、黒い画面に苦手意識があるので少しずつですが克服したいなあ、と思って練習です。

準備

以下の3つのファイルを編集します。

/etc/apache2/httpd.conf
/etc/hosts
/etc/apache2/extra/httpd-vhosts.conf

手順

1. /etc/apache2/httpd.confの編集

viに慣れたいのでviで編集しました。
ターミナルでこのコマンドを叩きます。
sudo vi /etc/apache2/httpd.conf

1-1.まずバーチャルホストが使えるようにコメントアウトを外します。

160行目付近

#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
↓
LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

499行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

1-2.PHPが使えるようにコメントアウトを外します。

169行目付近

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓
Include /private/etc/apache2/extra/httpd-vhosts.conf

2. /etc/apache2/extra/httpd-vhosts.confの編集

sudo vi /etc/apache2/extra/httpd-vhosts.confで編集します。

一番下の行に以下を記述します。

<VirtualHost *:80>
    ServerName cidermitaina.localhost

    CustomLog "/private/var/log/apache2/access_log_[projectname]" common
    ErrorLog "/private/var/log/apache2/error_log_[projectname]"

    DocumentRoot "/Users/[name]/[directory]/[projectname].localhost"
    <Directory "/Users/[name]/[directory]/[projectname].localhost/">
        AllowOverride All
        Options FollowSymLinks Indexes
        DirectoryIndex index.php index.html
        Require all granted

        Order Allow,Deny
        Allow from all
    </Directory>
</VirtualHost>

[name],[directory],[projectname]は適宜変更してください。

3./etc/hostsの設定

sudo vi /etc/hosts

以下の記述を追加します。

127.0.0.1 localhost [projectname].localhost

4 Apacheを再起動

httpd.confの文法チェック

sudo apachectl configtest

Apacheを再起動

sudo apachectl restart

5 確認

[projectname].localhostにアクセスしてページが表示されたら成功です。

memo

viに慣れていないのでviで使ったコマンドメモ

i　
→ カーソルの左からインサートモードへ移行

a
→ カーソルの右からインサートモードへ移行

Esc
→ コマンドモードに帰る／インサートモード解除

:q
→ 終了

:wq
→ ファイルに保存して終了

/検索したい文字列 
→ 前方検索

少しずつ黒い画面に慣れよう計画中です。。。
viも少しずつですが、慣れていきたいなあ、と思っています。
（あわあわしながらviでファイルを編集してました。）

2017-11-27

gulp4.0にしました。

gulp

大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。

悩んでたこと

ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。

原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。

そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。

やりたかったこと

gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、

・ run-sequenceを使う方法

・ gulpのバージョンを4.0にあげて'gulp.series'を使う方法が見つかりました。

run-sequence
複数タスクの並列／直列処理が設定できます。

www.npmjs.com

せっかくなのでgulp4.0の勉強も兼ねてバージョンをあげてみることにしました。

gulp v4.0

そもそもgulpのタスクは非同期で実行されるから高速なのかなあ、と勘違いしていたのですが、ドキュメントを読んでみると

If more than one task is listed, Gulp will execute all of them concurrently, that is, as if they had all been listed as dependencies of a single task.

タスクは非同期ではなくて並列で実行されるみたいです。勘違いをしていました。

並列で実行されることを踏まえてgulp4.0の気になった変更点を軽くまとめます。

gulp.series,gulp.parallelで直列/並列の処理
タスクに渡す関数の制約
gulp.taskの引数

その他の変更点は以下で確認してください。。。
https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md

1.gulp.series,gulp.parallel

gulp.seriesでタスクの直列処理、gulp.parallelでタスクの並列処理ができるようになりました。

gulp.series

gulp.task('default', gulp.series('build', 'server'));

buildのタスクが終わってからserverのタスクが動きます。

gulp.parallel

gulp.task('build', gulp.parallel('css', 'js', 'html'));

css,js,htmlのタスクは並列に実行されます。

2.タスクに渡す関数の制約

タスクに渡す関数の制約ができたみたいです。

最後にcallbackを実行する
streamを返す
Promiseを返す
child processを返す
observableを返す

をしないとエラーになってしまいます。

例えば、 sassのタスクですが、

gulp.task("sass", () => {
    gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

この書き方だと

The following tasks did not complete: sass
Did you forget to signal async completion?

こんなエラーが出てしまいます。

そのため非同期タスクにするためにstreamを返すように以下のように変更すると上手くいきました。（returnをつけてあげます）

gulp.task("sass", () => {
    return gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

3.gulp.taskの引数

gulp.taskの引数が最大2つになりました。

gulp v4.0の使い方

1, gulp4.0のインストール

α版なのでローカルにgulp4.0をインストールします。

npm install gulpjs/gulp#4.0 -D

2, npm scriptにgulpを登録

ローカルにインストールしているのでnpm runコマンドでgulpが実行できるようにpackage.jsonを編集します。

"scripts": {
    "gulp": "gulp"
  },

3, gulpfile.jsの編集

好きなタスクを書いてください。

4, 実行

コマンドで npm run gulp と叩くと実行できるはずです。

最後に作ったgulp4.0の環境です。

GitHub - cidermitaina/starter-kit: html5 starter-kit

不具合があるかもですが、誰かの参考になれば嬉しいです。