Gulp + yarn シンプルJQuery構成

動機

• jQueryのライブラリっていつもダウンロードしてくるの疑問に思ってた。
• jQueryのライブラリのバージョンっていつも同じではないよね。
• bowerの更新がストップしたとのことなので、yarnでパッケージ管理をする。
• webpackいまいちわかんね。

やりたいこと

• yarnでJSのパッケージ管理
• 旧体制（Only gulp または bower）からの脱却

Dir 構成

Dir構成

dist　→　書き出し先

gulpfile.js

const paths = {
    "css": "./src/assets/css/",
    "cssf": "./src/assets/css/**/*.css",
    "js": "./src/assets/js/",
    "jsf": "./src/assets/js/**/*.js",
    "scss": "./src/assets/scss/**/*.scss",
    "sass": "./src/assets/scss",
    "img": "./src/assets/img",
    "html": "./src/**/*.html"
}

Gulp task

（注意）開発者によっては、特定のフォルダであればライブラリをダウンロードして来てもらってもいいので、
concat＜結合＞はしない。

gulpfile.js

// npmで入れたフロントエンドライブラリをlibsに移す
gulp.task('vendor', () => {
    return gulp.src([
        "node_modules/jquery/dist/jquery.min.js",
    ])
    .pipe(plumber({
        errorHandler: (error) => {
            notify('vendor', error);
        }
    }))
    .pipe( gulp.dest( paths.js + '/libs' ));
});

どうなるか

gulpfile.jsの中でJSのライブラリを管理することになる。
ディレクトリ構成を見れば途中でプロジェクトに参加してきた人も何使ってるかわかるけど、新しくインストールするときにはちょっとめんどくさい。

（手順）

1. yarnでインストール
2. gulpfile.jsに記述
3. htmlでライブラリ読み込み

知ったこと

npmを使いやすくした（※1）のがyarnらしく、npmでインストールしていたgulpなどのパッケージもyarnで管理できるっぽい。

※1 : ダウンロード時間を短くした、一度使ったライブラリはオフラインでも使える、癒やしの絵文字

最近書いた記事

Dockerで作るWordPressテーマローカル開発環境
Gulp + Webpack + Babel + Vue.js で作るWordPressテーマ開発環境
Gulp + Webpack(+Babel)でシンプルJQuery構成

参考サイト

Bower は deprecated なので Yarn へ移行した
僕なりのフロントエンド開発環境2016年版