#92 gulpを入れてみる

とりあえずnode.jsが入っているかを確認
入っていない人はインストールしよう

node -v
v16.17.0

node.jsはざっくりいうと「PC上でJavaScriptを実行可能にするもの」

npmとnpxのバージョンを調べる。node.jsをインストールするとこれらは自動的に同梱されている

npm -v
8.19.1

npmは、node package managerの略。mavenみたいにweb上のリポジトリからパッケージのインストールを行う

npx -v
8.19.1

npxは、node package executerの略　npxコマンドを利用するとインストールしたパッケージをターミナルで実行できる

npm initでpackage.jsonを作る

npm init

コマンドを打つと、下記のようにいろいろ聞かれるので、いったん全部エンターを押していく

package name: (hogehoge) 
version: (1.0.0)                                                                                          
description:                                                                                              
entry point: (index.js)                                                                                   
test command:                                                                                             
git repository: (https://github.com/ユーザー名/hogehoge.git)                                         
keywords:                                                                                                 
author:                                                                                                   
license: (ISC)

するとpackage.jsonが出来上がる

package.jsonは、パッケージ管理用のファイル。npm上の各種パッケージをインストールする際に必要

package-lock.jsonというファイルも自動生成される。
こちらは、パッケージの依存関係が記述されている。

実際に、gulpを動かすには、パッケージをインストールした後に、具体的なタスクをgulpfile.jsに記載して、タスクをターミナルからコマンドで打って動かす。

ためしに、gulpとファイルを結合するgulp-concatをインストールする

npm install -D gulp gulp-concat

-Dは、パッケージのインストール情報をpackage.jsonの
devDependencies欄に追記するという意味

参考

npm install - npmコマンド虎の巻

-g　をつけるとグローバルにインストールされる。-gをつけないとローカルインストール（つまりこのプロジェクト上でのみ利用可能）になる

パッケージをインストールすると、node_modules内に多くのファイルが生成される。

タスク内容　gulpfile.js

const GENERATED_PATH = '../css';

//plugins
const gulp = require('gulp');
const concat = require('gulp-concat');

//タスク定義
function gulpProject1(){
 return gulp.src('./css/*.css')
  .pipe(concat('style.css'))
  .pipe(gulp.dest(GENERATED_PATH));
}

//タスク登録
exports.gulpProject1 = gulpProject1;

定数constでプラグインを定義
function 関数名()で関数を定義
returnでsrcを指定して、処理を書いて返す
pipe()は、連結して利用できるが、連結する順番に気をつける
タスク登録はexports.変数 = 関数名　()はかかなくていい

タスクを実行する  npx gulp 関数名

npx gulp gulpProject1

参考　ファイル処理

Working with Files | gulp.js

タスク登録

Creating Tasks | gulp.js

もしgitなどで、環境構築者が作った既に package. jsonがある状態だったら、npm ciだけで大丈夫

複数の処理の定義

今度はベンダープリフィックスをつけるgulp-autoprefixerと、文法チェックをするgulp-csslintとgulp-csslint-reportもインストールしてみる

npm install -D gulp-autoprefixer gulp-csslint gulp-csslint-report

csslintは、csslint用の設定ファイルが必要なので、csslintrc.jsonを設定ファイルとして用意する

ためしにID属性をCSSに書かないように制限するとして、csslintrc.jsonに下記を記述

"ids" : true,

参考　csslintの設定項目

複数処理のタスク内容

const GENERATED_PATH = '../css';

//plugins
const gulp = require('gulp');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const csslint = require('gulp-csslint');
const csslintReport = require('gulp-csslint-report'); 

// autoprefixer用定義
const AUTOPREFIXER_CONFIG = [
  'last 2 versions',
  'ie >= 11' //IE11を担保
];

//タスク定義
function gulpProject2(){
 return gulp.src('./css/*.css')
　.pipe(autoprefixer(AUTOPREFIXER_CONFIG))
  .pipe(csslint('csslintrc.json'))
  .pipe(csslintReporter());
  .pipe(concat('style.css'))
  .pipe(gulp.dest(GENERATED_PATH));
}

//タスク登録
exports.gulpProject2 = gulpProject2;

引数に指定する配列もgulpfile.jsで定義できる（autoprefixerの定義の所）

複数処理のタスクの実行　

npx gulp gulpProject2

エラーなどが出たら、「logs」ディレクトリに、csslint-report.htmlができる。このhtmlをブラウザで開くと、エラー内容が見れる

監視タスク watch

タスク登録の部分を下記のように書き換える

exports.gulpProject3 = function() {
  gulp.watch('css/*.css', gulpProject3);
}

タスク登録として無名関数を定義して、watchメソッドを利用する
watchメソッドの第一引数には、監視対象ファイルを指定
第二引数には、呼び出される関数を渡している

複数タスクの実行方法 series or parallel

function task1() {
  return gulp.src('./css/header.css')
  .pipe(...)
}
function task2() {
  return gulp.src('./css/main.css')
  .pipe(...)
}
exports.build = function(){
//直列処理の場合
  gulp.watch('css/*.css', gulp.series(task1, task2);
//並列処理の場合
  gulp.watch('css/*.css', gulp.parallel(task1, task2);
}

前処理や後処理を行いたいときは直列処理（series）
それ以外は並列処理（parallel）

参考：下記の本で勉強しました　わかりやすかったです

gulpで楽にするCSS管理: 2022年版

参考

そろそろ適当に npm install するのを卒業する - Qiita

もしgitなどで、環境構築者が作った既に package. jsonがある状態だったら、npm ciだけで大丈夫

「タスクを実行する」の所に書いた文章の引用

↑をもう少し深堀してみる

npm install

引数のない npm install コマンド実行をすると、package.json に記述されている情報を元に、そこに記述されている パッケージを node_modulesにインストールします。 つまり上の引用ような状況で使う。ciだとclean installってことかな

npm install -D gulp-autoprefixer gulp-csslint gulp-csslint-report

上記は -D をつけたバージョンだが、
- gをつけるとグローバルインストールになって、自分のPCのどのディレクトリでもinstallしたpackageのコマンドが実行できる

-D や -gなどのオプションをつけずにnpm install パッケージ名だと、ローカルインストールになる

オプション無しの場合、package.jsonに下記が自動的に記載される

{
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-image-resize": "^0.13.1"
  }
}

-Dをつけても、ローカルインストールになるが、package.jsonには下記のように書かれる

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-image-resize": "^0.13.1"
  }
}

闇雲にグローバルインストールするのは避けたほうがいい。

グローバルインストールされたパッケージは環境が異なると使用することができません。他人の PC でもそのパッケージを使用することが他人の PC でもそのパッケージを使用することができない。

package.json だけを共有すれば、どの環境でも npm install を実行するだけで、同じパッケージを使用することができる

一般的に、開発環境でしか使用しないパッケージについては npm install -D <package> として、そうではないパッケージについては npm install <package> とする。

devDependenciesとdependenciesだから、そのままの意味か。
本番環境にpackage.jsonあげることってあるんだろうか。。node-modulesも上げないのに。