Gulpプラグイン 用途別メモ

##gulp-wrapper
https://www.npmjs.com/package/gulp-wrapper

任意のコードをまるっと、wrapper（ラップ）したい時に

gulpfile.js

const gulp    = require('gulp')
const wrapper = require('gulp-wrapper')

gulp.task('{task_name}', function() {
  return gulp.src({file_paths})
	// ...省略  	
	.pipe(wrapper({
	   header: '<{tag}>\n',
	   footer: '</{tag}>\n'
	}))
	// ...省略
	.pipe(gulp.dest({dest_paths}))
})

##gulp-header
https://www.npmjs.com/package/gulp-header

任意のコードの前に追記したい時に
EX.「charset」の追記
EX. ライセンス情報を挿入

gulpfile.js

const gulp    = require('gulp')
const header  = require('gulp-header')

gulp.task('{task_name}', function() {
  return gulp.src({file_paths})
	// ...省略  	
	.pipe(header('@charset "UTF-8";\n\n'))
	// ...省略
	.pipe(gulp.dest({dest_paths}))
})

※「gulp-footer」もある
https://www.npmjs.com/package/gulp-footer

##gulp-replace
https://www.npmjs.com/package/gulp-replace

任意の箇所を、replace（置換え）したい時に
EX. 出力ファイル別に任意のパスへ書き換え
EX. 不要な箇所を「''」(空)にする
EX. 正規表現で置換

gulpfile.js

const gulp    = require('gulp')
const replace = require('gulp-replace');

gulp.task('{task_name}', function() {
  return gulp.src({file_paths})
	// ...省略  	
	.pipe(replace('bar', 'foo'))
	// ...省略
	.pipe(gulp.dest({dest_paths}))
})

##gulp-rename
https://www.npmjs.com/package/gulp-rename

任意のファイル名を、rename（リネーム）したい時に
EX. minifyしたファイルを「.min.{file_name}」にリネーム

gulpfile.js

const gulp    = require('gulp')
const replace = require('gulp-rename');

gulp.task('{task_name}', function() {
  return gulp.src({file_paths})
	// ...省略  	
	.pipe(rename('xxxx.min.css'))
	// ...省略
	.pipe(gulp.dest({dest_paths}))
})

##gulp-template
https://www.npmjs.com/package/gulp-template

簡易的なテンプレートとして利用
EX. 任意の箇所のテキストを変数として管理
EX. 読み込みのパスへパラメータを付与してキャッシュ対策

gulpfile.js

const gulp    = require('gulp')
const replace = require('gulp-template');

gulp.task('{task_name}', function() {
  return gulp.src({file_paths})
	// ...省略  	
	.pipe(template({name: '{name}'}))
	// ...省略
	.pipe(gulp.dest({dest_paths}))
})

xxxx.hrml

<h1>Hello <%= name %></h1>

##gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin

画像ファイルの最適化
※「gulp-newer」は変更されたファイルをStream

gulpfile.js

const gulp     = require('gulp')
const newer    = require('gulp-newer')
const imagemin = require('gulp-imagemin')
 
gulp.task('{task_name}', function() {
    gulp.src('src/images/*')
     .pipe(newer('dist/images'))
     .pipe(imagemin({ optimizationLevel: 5 }))
     .pipe(gulp.dest('dist/images'))
);

##gulp-sftp
https://www.npmjs.com/package/gulp-sftp

SSH経由でファイルをアップロードする

gulpfile.js

const gulp = require('gulp');
const sftp = require('gulp-sftp');
 
gulp.task('{task_name}', function () {
    return gulp.src('htdocs/*')
        .pipe(sftp({
            host: 'website.com',
            user: 'johndoe',
            pass: '1234'
        }));
});