2018/04/25時点。これは楽チン、すばらしい！

成果物

目的

HTML,CSS,JSを快適に開発するための環境構築。

メタ言語で書いてコードをモジュール化！
最新言語で書いて旧式ブラウザで動かす！
$ gulpコマンド一発で作業の自動化！
- ビルド＆ファイル結合
- コードが変更されたら自動リビルド＆ブラウザ起動/更新

メタ言語

メタ言語	出力言語
pug	HTML
stylus	CSS
JS(ES6)	JS(ES5)

pug, stylus は別ファイルに分割、変数使用などができてDRYに書けるようになる。ES6はJSでclass構文などが使える。webpackではファイル分割しimport構文で取り込める。

コードの保守性が保てる！

自動更新

pug, stylus, jsのソースコードファイルを監視し、変更があればブラウザを自動更新して表示する。いちいち手動でコマンドを打つ必要なし！

使い方

$ cd /tmp
$ git clone https://github.com/ytyaru/Gulp.Install.20180425070000
$ cd Gulp.Install.20180425070000
$ npm i
$ gulp

事前にgit, Node.js, npmがインストールされていること

所要時間	ファイルサイズ
約10分	約92MiB

コマンドの概要は以下。

githubから今回のコードを入手
必要なnpmパッケージをローカルにインストールする
gulpでビルドとブラウザ起動のタスクを実行する

実行結果

f:id:ytyaru:20180425103920p:plain f:id:ytyaru:20180425103911p:plain f:id:ytyaru:20180425104020p:plain

開発環境

Raspberry Pi 3 Model B
- Raspbian GNU/Linux 8.0 (jessie)
  - vim 7.4
  - Chromium 56.0.2924.84
  - Node.js 9.4.0
    - npm 5.6.0
      - n 2.1.7
      - Gulp 3.9.1
        
        work系
        
        gulp-plumber 1.2.0
        
        gulp-notify 3.2.0
        
        browser-sync 2.23.7
        
        HTML
        
        gulp-pug 4.0.1
        
        CSS
        
        gulp-stylus 2.7.0
        
        JS
        
        webpack 4.6.0
        
        webpack-stream 4.0.3
        
        gulp-babel 7.0.1
        
        babel 6.23.0
        
        babel-preset-env 1.6.1
        
        babel-polyfill 6.26.0

node_modules/ にインストールするもの

モジュール	説明
gulp-stylus	stylus→css
gulp-sass	sass→css
gulp-pug	pug→html
gulp-plumber	sassとpugの変換でエラーが出た場合の強制終了を防止
gulp-notify	デスクトップ通知
browser-sync	ブラウザの起動、ファイル変更時リロード
webpack	JSファイル結合
webpack-stream	gulpでwebpackを使うために必要
gulp-babel	gulpでbabelを使うために必要
babel	JSをES6からES5へトランスパイルする
babel-preset-env	指定ブラウザに未実装の構文のみトランスパイルする（将来2.0正式版になり`"useBuiltIns": "usage"できれば` babel-polyfill, babel-plugin-transform-runtime不要）
babel-polyfill	Promiseなどの機能が未実装なら穴埋めする

構成

Gulp.Install.20180425070000/
- node_modules/
- src/
  - pug/
    - index.html
  - stylus/
    - style.styl
  - js/
    - main.js
    - Sub.js
- dst/
  - html/
  - css/
  - js/
- gulpfile.js
- webpack.config.js
- .babelrc

gulpコマンドでsrc/配下のコードがビルドされる。出力先はdst/。index.htmlはプロジェクトのルートに出力。

gulpコマンドで実行するタスクはすべてgulpfile.jsに書いてある。JSの結合とトランスパイルの設定はそれぞれwebpack.config.js, .babelrcにある。

おまけ

使わなかったもの

`gulp-sass`

インストールに1時間近くかかった
stylusならsass記法でも書ける

sassはstylusと同様、CSSのメタ言語。最初はstylusでなくsassを使おうとしていた。情報も多かった。だが、stylusは後発だし構文もsassで書けるようだったのでgulp-sassはやめた。

babel-polyfill

Promiseの勉強が必要
babel-preset-env 2.0が正式版になれば不要？（`"useBuiltIns": "usage"で解決）

その前にpug, stylusの学習が先。また、Promise以外のES6についても同様。それをやっているうちにブラウザでネイティブ実装されるかも。と思ったのでまだ使ってない。

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

フロントエンド開発環境を構築する gulp, pug, stylus, babel(ES6)

成果物

目的