WEB掻っ穿じり

WEB備忘録とチャリとカメラ

【備忘録】Gulp 4サクッと導入(nodenv版)

　　category：web

タスクランナーGulp 4

4年前にGulpは1度書いているが、、ver.4用にupdate、、備忘録です。

今回はGulp 4に合わせた内容にするのと、Node.jsはnodenvでプロジェクトごとにバージョン管理、gulpもグローバルにインストールはしないやり方、mac OS & Homebrew入っている & Node.jsは未インストール 前提。
(すでにnode、もしくはnodebrewが入っていればアンインストールする アンインストールする)

nodenvインストール

brewをupdate(定期的に)

$ brew update

brewでnodenvをインストール

$ brew install nodenv

環境変数を設定

$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l

node-buildをインストール

$ git clone https://github.com/riywo/node-build.git $(nodenv root)/plugins/node-build

確認

$ nodenv -v

nodenv 1.3.1

nodeをインストール

インストールできるバージョンを確認

$ nodenv install -l
 v0.1.14
 v0.1.15
 　・
 　・
 v13.7.0
 iojs-v1.0.0
 　・
 　・
 iojs-v3.3.0
 iojs-v3.3.1

バージョン指定のインストール (ver.13とver.7をインストールする)

$ nodenv install v13.7.0
$ nodenv install v7.10.1

インストール済みのNodeのバージョン確認

$ nodenv versions
v13.7.0
v7.10.1

Nodeバージョンのグローバル設定(デフォルト使用設定)

$ nodenv global v13.7.0

Nodeとnpmのバージョン確認

$ node -v
v13.7.0
$ npm -v
6.12.1

Nodeバージョンのローカル設定（プロジェクトごと、、対象のカレントディレクトリで設定）
rootに .node-version ファイルが作成される

$ cd hoge
$ nodenv local v7.10.1
$ node -v
v7.10.1

これでhogeディレクトリでは ver.7を参照するようになり、プロジェクトごとにNode ver.を使い分けれる。

最後に念押しで、インストールのチェックをするスクリプトでOKが出れば問題なし。

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
Checking for `nodenv' in PATH: /usr/local/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.7.2)
Counting installed Node versions: 2 versions
Auditing installed plugins: OK

Gulpをインストール

Nodeのインストールは済んだので、次はGulpをインストール

gulp_demo ディレクトリを作ってカレントディレクトリにする

$ mkdir gulp_demo && cd gulp_demo/

プロジェクトの package.json ファイルを作成
(yはyesのショートカット、書き込み確認returnキー押下を省略できる)

$ npm init -y

package.json の中身、そのままでOK
(npm installの度に書き換わる)

{
  "name": "gulp_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Gulpをインストール
(Dは ––save-dev のショートカット、Gulp本体をローカル環境のプロジェクトディレクトリ配下のみ使えるようにする。グローバルに gulp-cli をインストールしない)

$ npm install -D gulp

あとはrootにgulpfile.jsを置き、プラグインの読み込みとタスクを作成、読み込みプラグインに必要なモジュール本体たちは、$ npm install -D gulp {プラグイン名}で同じようにローカルインストールればGulpは走ってくれる。

GulpでSassをコンパイル

まずは、GulpにSassの.scssファイルを.cssファイルにコンパイルさせる

rootに空のgulpfile.jsを配置する

$ touch gulpfile.js

gulp-sassを使うので、インストールしておく。

$ npm install -D gulp gulp-sass

まずはsassのタスクはこんな感じ、、 .pipe()メソッドでチェーンで処理をつなることができる。

// プラグインの読み込み
const gulp = require('gulp'),
      sass = require('gulp-sass');
 
// Sassをタスク
gulp.task('default', function() {
  return (
    gulp
      .src('scss/style.scss')
      .pipe(sass())
      // 同ディレクトリにコンパイルしたcssファイルを保存
      .pipe(gulp.dest('css'))
  );
});

タスクの実行 (npxはnpm ver.5.2.0〜導入されたnpmパッケージを実行するコマンド)

$ npx gulp

意図した結果になっているはず。

omni7セブンネットショッピング

localでssl簡易サーバーをたてファイルを監視しながらブラウザをliveRelodingさせる

sassファイルのコンパイル時やdom要素に編集が入った場合には自動でreloadさせるようにする。

browser-syncとgulp-connectを使うので、インストールしておく。

$ npm install -D gulp browser-sync
$ npm install -D gulp gulp-connect

タスクはこんな感じに。。

const {src, dest, watch, series} = require('gulp'),
      sass = require('gulp-sass'),
      browser = require('browser-sync'),
      connect = require('gulp-connect');


const compileSass = () => 
  src('scss/style.scss')
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(dest('css'));

const watchSassFiles = () => {
  watch(['scss/style.scss','*.html'], series(compileSass,reload) );
}

const server = (cb) => {
  watchSassFiles();
  connect.server({
    port: 3000,
    base:''
  },() => {
    browser({
      server: {https: true}
    });
  });
  cb();
}

const reload = (cb) => {
  browser.reload();
  cb();
}

exports.default = server;

series(直列)でタスクをつなげる場合、タスクにPromiseを返してコールバックパラメータを読んで完了を通知させる必要があるみたいです、、nameはなんでも良さそう。

ないとerrorになります。