BLOG

Gulp

yarnをインストール

npm install -g yarn

使えるコマンド確認

yarn -h

プロジェクトフォルダに移動

以下を実行してインストール

yarn global add gulp-cli

※globalをつけることで、このプロジェクト以外からでも使えるようにする

次にプロジェクトの設定ファイルを初期化

yarn init -y

package.jsonが出来る

今後モジュールが追加されていく度にモジュールの追加情報やフロントエンド開発に必要な設定情報がここに追記されていく。

次にgulpをインストール

yarn add gulp --dev

package.jsonのdevDependenciesにgulpが追加されていればオーケー

gulp --help

これでズラーっとオプションが出てくれば成功。

次に下記を追加

・distフォルダ

・srcフォルダにindex.html

・gulpfile.jsファイル

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./src/index.html')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

以下を実行

gulp copyFiles

src内の複数ファイルをdistにコピーする場合

配列で指定

const {src, dest} = require('gulp');

function copyFiles(){
    return src(['./src/index.html','./src/sub.html'])
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

src内全てを選択する場合

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./src/*')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

src内のhtmlのみコピーしたい場合

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./src/*.html')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

大規模プロジェクトなどで、src>assets>index.html などをコピーしたい場合

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./src/**')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上のような条件+htmlファイルのみの場合

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./src/**/*.html')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

プラグイン

ファイルの名前の変更

yarn add gulp-rename --dev

package.jsonにgulp-renameが追加されている

基本的に–devを使う。

gulpfile.js

const {src, dest} = require('gulp');
const rename = require('gulp-rename');

function copyFiles(){
    return src('./src/index.html')
        .pipe(rename({
            prefix: 'hello-'
        }))
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

prefixに付与したい文字列を与える

以下を実行

gulp copyFiles

distフォルダにhello-index.htmlが追加されている。