動機

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

（手順）

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

知ったこと

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

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

参考サイト

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

Gulp + yarn シンプルJQuery構成

動機