gulpに関して

投稿日：2018年7月8日更新日：2018年11月11日

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。

ちなみに以前書いた記事は下記

gulpインストールとタスクの実行

Contents

1 インストール
2 タスクの実行
3 npxコマンドについて
4 gulpの各命令について
5 gulp コマンド確認
6 必須っぽいライブラリ

インストール

これは上記の記事間違っていないのですが、下記コマンドでそのままOK

//もしgulp以外でライブラリを入れていなかったら下記コマンドでpackage.jsonを作成
npm init -y

//通常のインストール
npm install -D gulp

//もしgulp以外でライブラリを入れていなかったら下記コマンドでpackage.jsonを作成

npm init -y

//通常のインストール

npm install -D gulp

タスクの実行

今まで下記のようなコマンドでやっておりました。

npm run gulp

1	npm run gulp

上記のリンクでも書いておりますが、あくまでpackage.jsonのscriptに記述があった場合です。

そうでない場合は下記のように単独で打ち、実行します。

npx gulp (タスク名　ないときはdefault)

1	npx gulp (タスク名　ないときはdefault)

npxコマンドについて

基本的にローカルのnpmパッケージを実行するには、

./node_modules/bin/〜などを実行する必要がありますが、

npxコマンドを実行することでより簡便な方法で実行することができます。

例えばsassがnpmでインストールされているとして、

./node_modules/node-sass/bin/node-sass ./sass/sample.scss ./sass/sample.cssで実行することもできますが、

npx node-sass ./sass/sample.scss ./sass/sample.css

の方が簡便です。

参考URL npm 5.2.0の新機能！「npx」でローカルパッケージを手軽に実行しよう

gulpの各命令について

const gulp = require('gulp')
const del = require('del')
const runSequence = require( 'run-sequence' ),

pathInfo = {
  srcDir:'src',
  distDir: 'htdocs'
}


//srcからdistへの移動
//ディレクトリの作成も含む
gulp.task('move', function() {
  console.log('--task move--')
  //ファイルの読み込み
  //完全再帰にする場合は下記のようにかく
  //特定拡張子の場合は/*/*.scssなど
  gulp.src(pathInfo.srcDir + '/**/*')
  //パイプは単なる結合
  //destは吐き出し
      .pipe(gulp.dest(pathInfo.distDir + '/'))
})

/**
 * 生成ファイルの削除(一番最初に行う)
 */
gulp.task('clean', function(){
  console.log('--task clear--')
  del([
    pathInfo.distDir
  ])
})

/**
 * defaultでは全処理を実装
 */
gulp.task('default', function(){
  console.log('--total task clean move --')  
  runSequence(
    'clean','move'
  )
})

const gulp = require('gulp')

const del = require('del')

const runSequence = require( 'run-sequence' ),

pathInfo = {

srcDir:'src',

distDir: 'htdocs'

}

//srcからdistへの移動

//ディレクトリの作成も含む

gulp.task('move', function() {

console.log('--task move--')

//ファイルの読み込み

//完全再帰にする場合は下記のようにかく

//特定拡張子の場合は/*/*.scssなど

gulp.src(pathInfo.srcDir + '/**/*')

//パイプは単なる結合

//destは吐き出し

.pipe(gulp.dest(pathInfo.distDir + '/'))

})

/**

* 生成ファイルの削除(一番最初に行う)

gulp.task('clean', function(){

console.log('--task clear--')

del([

pathInfo.distDir

])

})

/**

* defaultでは全処理を実装

gulp.task('default', function(){

console.log('--total task clean move --')

runSequence(

'clean','move'

)

})

ちなみにgitのソースは下記

https://github.com/umanari145/gulp_sample

今までは単発でsassのコンパイルなどをしていたんですが、タスクランナーなのでビルドコマンドなどでリリースまでに関わる処理を一括で行うことができます。

以前やったjenkinsのCIに近い感じですね。

gulp コマンド確認

src ・・対象ファイルの取得(/**/*とやると全階層取得)

pipe ・・対象ファイルをストリーム化。基本はsrcで取得したものをこれで処理する

dest ・・対象ファイルの出力先(ディレクトリがなければ自動的に作成する)

必須っぽいライブラリ

del ・・削除を行う。初期化などに使えそう。

runSequense・・一連の流れをここでタスク化。基本的にはここに全ての処理を集めた方が良さそう。

Gulp でタスクを並列/直列処理する

gulp：ディレクトリ・ファイル構成を維持してdestする

htaccessが絡んだファイルでコピーがうまくできなくてイラついていたところ、Linuxコマンドが使えるライブラリがあったんでメモ。

これ便利！gulpfile.js でLinuxコマンドを記述して実行できるプラグインgulp-exec と child_processを使ってみた