Gulpプラグイン 用途別メモ
gulp-wrapper
任意のコードをまるっと、wrapper(ラップ)したい時に
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
任意のコードの前に追記したい時に
EX.「charset」の追記
EX. ライセンス情報を挿入
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
任意の箇所を、replace(置換え)したい時に
EX. 出力ファイル別に任意のパスへ書き換え
EX. 不要な箇所を「''」(空)にする
EX. 正規表現で置換
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
任意のファイル名を、rename(リネーム)したい時に
EX. minifyしたファイルを「.min.{file_name}」にリネーム
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
簡易的なテンプレートとして利用
EX. 任意の箇所のテキストを変数として管理
EX. 読み込みのパスへパラメータを付与してキャッシュ対策
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}))
})
<h1>Hello <%= name %></h1>
gulp-imagemin
画像ファイルの最適化
※「gulp-newer」は変更されたファイルをStream
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
SSH経由でファイルをアップロードする
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'
}));
});
Author And Source
この問題について(Gulpプラグイン 用途別メモ), 我々は、より多くの情報をここで見つけました https://qiita.com/ysakmyg/items/4f0582514b0d2fe39373著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .