EC-CUBE CSSとJS

EC-CUBE 使い方
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/EC%2dCUBE%20%bb%c8%a4%a4%ca%fd
の、EC-CUBEのUIを参考にECサイトを作ってみる、の分岐。

EC-CUBEのCSSやJSをビルドする。以下を参考にしてみる。
https://github.com/EC-CUBE/ec-cube?tab=readme-ov-file
https://doc4.ec-cube.net/design_sass

Sass のソースコードは、ec-cube/html/template/{admin,default}/assets/scss/ にある。
Laravel側は、ec-cube_43la/public/html/template/{admin,default}/assets/scss/ にある。
というか、以下
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Symfony
の、ここまでできている分をBackUpとして残し、コピーして改めてLaravel用を作る。で、EC-CUBE
からpublicの下にコピーしていた。
Node.js はインストール済み。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/node%2ejs
$ node –version
v18.18.0

ここで、https://doc4.ec-cube.net/design_css の方を見てみると、スタイルガイドについて、
とあり、https://seesaawiki.jp/lifewithslackzaurus_15_0/d/CSS%a4%ce%c0%df%b7%d7 を保留していた事を
思い出してしまった。CSSコーディングバイブルが途中だった。コーディングガイドまでもう少し
だった。戻るか~?、defのコードをビルドするだけだから見なくていいか~?、学習機会損失?
見るなら今か。

以下のコマンドでビルドすることで、 html/template/**/assets/css に CSS ファイルが出力されます。
$ npm ci # 初回およびpackage-lock.jsonに変更があったとき
$ npm run build # Sass のビルド
\
とあったが、package.jsonを編集しないでやってみた。(package.jsonの中身は、Instした結果か?、そうでもなかった)
$ npm install –save-dev gulp
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: vite@undefined
npm error node_modules/vite
npm error dev vite@”^5.0.0″ from the root project
npm error
npm error Could not resolve dependency:
npm error peer vite@”^5.0.0 || ^6.0.0″ from laravel-vite-plugin@1.1.1
npm error node_modules/laravel-vite-plugin
npm error dev laravel-vite-plugin@”^1.0.0″ from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with –force or –legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

仕方ないので、package.jsonからvite関係とaxiosを外した。
$ npm install –save-dev gulp
added 47 packages, removed 188 packages, changed 5 packages, and audited 157 packages in 7s
14 packages are looking for funding
\ run `npm fund` for details
found 0 vulnerabilities
\
$ npm install –save-dev gulp-clean-css
npm error Invalid Version:

やっぱ、ec-cubeのpackage.jsonのgulp関係の記述をコピーしてinstallしてみる事にした。
$ npm install –save-dev gulp gulp-clean-css gulp-notify gulp-plumber gulp-postcss gulp-rename sass gulp-sass
(メモ省略、実際は個別にInstした。DL速度が遅いと npm error code ETIMEDOUT となる。
package.jsonで指定したVersionでinstallできた。今まで気にしてなかったが、指定すればその
VerでInstするし、指定なければ最新を持ってくる)
DLしてきたec-cubeにはnode_modulesが無いということは、プロジェクトdirに入れるかNODE_PATHに
入れるか選べということか。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/node%2ejs%20%bb%c8%a4%a4%ca%fd

ec-cubeからgulp関係ファイルをコピー/編集した。
$ cp -i -a ec-cube/{gulp,gulpfile.js} ec-cube_43la/
$ emacs ec-cube_43la/gulp/config.js (pathを変更した)
$ emacs ec-cube_43la/gulp/task/webpack.js (pathを変更した)
\
gulpのbuild.jsにwebpackが書いてあったので、webpack関係ファイルをコピー/編集。
$ cp -i -a ec-cube/webpack.config.js ec-cube_43la/
$ emacs ec-cube_43la/webpack.config.js (pathを変更した)
webpackとbundleやbabelについては以下にメモ
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b2
\
ec-cubeのpackage.jsonのwebpack関係をコピーしてinstall。
$ npm install –save-dev webpack webpack-cli webpack-stream
(メモ省略、実際は個別にInstした)

その他、もろもろをコピーしてinstall。
$ npm install –save-dev @babel/core @babel/preset-env babel-loader autoprefixer browser-sync cross-env css-mqpacker normalize.css postcss-import process sort-css-media-queries
(メモ省略、実際は個別にInstした)
$ npm ls –local
(メモ省略。devDependenciesをInstしたらdependenciesもInstされた。そこはC/C++と同じらしい)

($ npm run build 保留。Laravel記述部分にbugがあってそっちの修正を先にやる)

参考情報:
そのうちdocker-composeでInstしてみたいが、大量にファイルをDLするだろうからなあ~。
レンタルサーバで練習するか。
$ npx webpack –version
webpack: 5.97.1
webpack-cli: 4.10.0
webpack-dev-server not installed
(Instするか保留)

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です