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
- 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
dist → 書き出し先
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"
}
（注意）開発者によっては、特定のフォルダであればライブラリをダウンロードして来てもらってもいいので、
concat＜結合＞はしない。
// 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 : ダウンロード時間を短くした、一度使ったライブラリはオフラインでも使える、癒やしの絵文字
最近書いた記事
Dockerで作るWordPressテーマローカル開発環境
Gulp + Webpack + Babel + Vue.js で作るWordPressテーマ開発環境
Gulp + Webpack(+Babel)でシンプルJQuery構成
参考サイト
Author And Source
この問題について(Gulp + yarn シンプルJQuery構成), 我々は、より多くの情報をここで見つけました https://qiita.com/KoichiSugimoto/items/2136dfb1e9679868abba著者帰属：元の著者の情報は、元の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 .