Magento2: Menghasilkan file css di folder pub / statis


51

Saya telah menginstal Magento 2 dan mengatur mode pengembang, maka saya telah menginstal satu modul yang berisi file css dan js. Modul ini berfungsi dengan baik dan file css dan js di-render dari pub / folder statis. Sekarang saya telah membuat perubahan css pada file module direktori css dan jalankan perintah

php bin/magento setup:static-content:deploy

tapi Magento tidak membuat perubahan baru di file css pub / statis jadi saya mendapatkan konten file css lama. Adakah yang tahu cara membuat ulang seluruh file css di folder pub / statis?


8
FYI: Magento 2 memiliki mode pengembang sehingga Anda tidak harus menggunakan konten statis setiap saat. Saya telah membuang waktu berjam-jam dalam sebulan terakhir untuk menggunakan kembali konten statis. Jadi jangan seperti saya, dan beralih ke mode pengembang (pada mesin lokal Anda. Server langsung Anda harus pada mode produksi)
Nathan Merrill

mengapa regenerasi dengan versi yang berbeda ??? Saya memiliki masalah dengan menyebarkan versi file yang tidak cocok. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

3
Jika magento dalam mode pengembang, ia akan membuat symlink ke file statis, tetapi agar hal ini terjadi, Anda harus memiliki .htaccessfile di pub/staticfolder sehingga tahu bagaimana cara symlink file, jika Anda menghapus pub / folder statis yang .htaccesshilang sekarang
Vlad Patru

@NathanMerrill Anda begitu benar tetapi sebagian besar dev tidak membaca dokumentasi dan semua jawaban dan masih menjalankan konten statis: menyebarkan perintah dan yang agak menyedihkan adalah bahwa beberapa perusahaan dengan akun di Stackexchange memberikan jawaban seperti itu , buang-buang waktu
Vlad Patru

Jawaban:


69

Sebelum menghapus pub / static, buat cadangan pub / static / .htaccess dan kembalikan lagi. jika tidak semua css dan js Anda akan menampilkan kesalahan 404!

  1. Hapus pub/static[Simpan .htaccess dicadangkan dan salin lagi]
    1. Menghapus var/cache
    2. Menghapus var/composer_home
    3. Menghapus var/generation
    4. Menghapus var/page_cache
    5. Menghapus var/view_preprocessed
    6. Lari php bin/magento setup:static-content:deploy

48
M2 tidak membuat segalanya menjadi sangat ramah bagi pengembang.
Matthew McLennan

10
@CarComp tidak ada file yang harus dihapus secara manual. Magento harus mengurusnya. itu sangat menjengkelkan
Claudiu Creanga

10
Kamu

6
Saya pikir menghapus pub / statis Anda kehilangan juga di dalam file .htaccess yang penting untuk menghindari 404 kesalahan, ok untuk menghapus subfolder dari pub / statis tapi itu .htaccess harus dilestarikan
Elio ERMINI

3
Saya baru mengenal "magento". WAT? Apakah ini cara resmi untuk memperbarui css?
puchu

20

jawaban di sini tidak menyebutkan bahwa Anda tidak boleh menghapus .htaccess di folder pub / static.

untuk menghapus semua file kecuali .htacces masukkan direktori pub / static dan jalankan

find . -depth -name .htaccess -prune -o -delete

maka kamu bisa lari

rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ 

mengapa regenerasi dengan versi yang berbeda ??? Saya memiliki masalah dengan menyebarkan versi file yang tidak cocok. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

1
tidak bekerja seperti yang diharapkan
Christophe Ferreboeuf


9

Karena pertanyaannya adalah untuk js and csspembaruan di Magento 2 dalam mode pengembang .

  1. Memperbarui JS di modul yang Anda hormati, sebelum pub/static/frontend/namespace/theme/ ... module/js/...me-refresh halaman, file yang sama tidak akan dihapus sehingga setelah me-refresh file JS yang baru akan dihasilkan di folder pub.
  2. Memperbarui CSS di modul yang Anda hormati, lakukan pt 1.
  3. Memperbarui lebih sedikit file

Siapkan tema di magento ...\dev\tools\grunt\configs\themes.js

Kloning salah satu contoh tema tema luma ke tema Anda dan tentukan nama misalkan xyz

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

Di root folder ubah nama file: Gruntfile.js.sample ke Gruntfile.js

Di root folder ubah nama file: package.json.sample ke package.json

Perlu ada gerutuan di folder situs Anda yang lain instal via npm

Buka command prompt dengan izin administrator

Buka folder situs di CMD & tekan perintah grunt exec:themeuntuk pertama kali setelah menyebarkan tema

Maka grunt less:theme setiap saat jika kita melakukan perubahan kurang

Jika Anda melakukan perubahan sering dalam penggunaan kurang grunt watchsehingga otomatis akan mengenaigrunt less:theme

Catatan: Anda mungkin mendapatkan kesalahan Symlink jadi buka file .../app/etc/di.xmldan komentari atau hapus kode (kode di bawah) di lokal Anda sampai pengembangan selesai, jangan dorong kode chnaged file ini ke server, itu hanya diperlukan di lokal jika perlu.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

7

Cara sederhana 1

Di Admin Magento. Pergi ke System > Tools > Cache Managementdan klik Flush Static Files Cache .

Cara sederhana 2

Jika Anda baru saja mengubah file css yang sudah ada , yang perlu Anda lakukan hanyalah menghapus file yang sesuai di pub/staticdalamnya, maka ketika Anda me-refresh halaman, itu akan menghasilkan file css versi baru. Ini bekerja dalam mode pengembang .


Memperhatikan

  1. Saat Anda membuat file baru, alih-alih memodifikasi file yang sudah ada, Anda mungkin perlu menghapus cache php bin/magento cache:flush,.

  2. Mode default dan mode pengembang tidak perlu menggunakan file tampilan statis , karena file statis dihasilkan secara dinamis daripada terwujud. (Referensi: Tentang mode Magento )

  3. Dalam mode produksi , Anda mungkin juga perlu php bin/magento setup:static-content:deploydan php bin/magento cache:flush, saya belum mencoba mode produksi .


6

Ok jadi berdasarkan apa yang saya baca di berbagai posting lain dan pengalaman pribadi saya di sini adalah proses untuk membuat ulang CSS atau Konten Statis:

php bin/magento setup:upgrade

Ini akan menghapus semua file cache / generation / etc yang diperlukan tanpa menghapus apa pun yang sebenarnya Anda butuhkan.

php bin/magento setup:di:compile

Ini kemudian akan mengkompilasi ulang file. Akhirnya:

php bin/magento setup:static-content:deploy

Setelah perintah terakhir semuanya harus baru dan segar, cukup segarkan halaman Anda.

----- Catatan ------

1) Pastikan izin dan pemilik file Anda: grup pengguna diatur dengan benar sebelum melakukan ini, Anda mungkin perlu membicarakannya dengan sysadmin Anda.

2) Jika pengaturan Anda: perintah upgrade gagal mungkin menghapus file dan tidak dapat menulis yang baru, seperti kasus saya karena izin file. Ini dapat merusak situs Anda, hanya menghapus izin, kemudian jalankan kembali perintah.

3) Saya belum menemukan (sejauh ini) cara untuk hanya mengkompilasi ulang tema atau file tertentu (akan sangat membantu jika ada yang menemukan jalan) tanpa menulis skrip khusus sepenuhnya

Jika ada yang tahu tentang sesuatu yang lebih baik beri tahu saya, karena 12 menit mengkompilasi file karena saya harus membuat beberapa perubahan css adalah desain yang sangat buruk di mata saya.

--- Sunting ---

Magento 2 memiliki Grunt terikat di dalamnya dan ini membuat menyegarkan file CSS / KURANG jauh lebih mudah jika Anda meluangkan waktu untuk mengkonfigurasinya. Sebagian besar file ada sebagai file .sample hanya menghapus ekstensi file .sample, mengkonfigurasi file themes.js di folder / dev / tools / grunt / configs. Kemudian ketika Anda perlu me-refresh file KURANG Anda, Anda hanya menjalankan kurang menggerutu: - theme-- dari baris perintah.

Sumberdaya: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html


Berhenti menyediakan setup bin / magento php: static-content: metode deploy, dalam mode pengembang
magento

Oh dan menghapus folder secara manual, menghapus file .htaccess dan lainnya yang tidak terkait, dan memaksanya untuk membangun kembali adalah metode yang lebih baik ??? Saya menambahkan komentar tentang menggunakan Grunt, karena hanya memindahkan toko Anda ke mode pengembang tidak membuat instantiate semua symlink dan menyegarkan css Anda pada pemuatan ulang halaman.
Vallier

6

jangan lupa untuk menjalankan grunt exec:theme, grunt less:themeperintah di mana themetema yang Anda nyatakan dalam themes.jsfile dari folder konfigurasi grunt (semua ini ada dalam panduan pengembang) dan ketika Anda memiliki magento dalam mode pengembang Anda tidak boleh menjalankan perintah deploy statis, Magento2bekerja denganSymlinks


1
"ketika Anda memiliki magento dalam mode pengembang, Anda seharusnya tidak menjalankan perintah deploy statis" <- Ini sangat membantu saya. Terima kasih! Saya baru saja menghapus isi direktori pub / static (kecuali tentu saja .htaccess), me-refresh halaman dan symliks ke file css saya secara otomatis dihasilkan. Sekarang saya bisa mengeditnya dengan cepat. Siapa bilang Magento 2 tidak ramah? Hanya perlu tahu cara menggunakannya, saya kira.
Rooster242

1
Hai, terima kasih sobat, menggerutu kurang: default memecahkan masalah
Yusuf Ibrahim

6

Jalankan perintah ini di folder root Magento Anda :

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:flush &
mage indexer:reindex &
mage setup:upgrade &&
mage setup:static-content:deploy ; 
mage setup:db-data:upgrade &&
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/

Tidak pernah terpikir untuk menjalankan rusa kutub di latar belakang 👍🏻
Sergei Filippov

Apakah saya atau ini perintah Magento 1 sebagai jawaban atas pertanyaan Magento 2?
Barry

Tidak ada perintah Magento 1, berasal dari Magento 2
Rafael Corrêa Gomes

6

Ada satu catatan penting untuk dibuat tentang pertanyaan ini yang sebagian besar jawabannya tidak secara khusus menunjukkan. Dalam kasus Anda (dengan pengaturan yang Anda gunakan) alasan perubahan CSS Anda tidak diambil ketika Anda membuat ulang CSS ke dalam pub/staticfolder adalah Anda tidak menghapus konten var/view_preprocesseddirektur. Di dalam direktori ini ada versi cache CSS Anda yang menarik ke pub/staticfolder ketika Anda menjalankan php bin/magento setup:static-content:deployperintah.

Jadi, ketika Anda mengkompilasi ulang, Magento akan melihat var/view_preprocessedfolder untuk cache yang di-cache terlebih dahulu. Jika folder ini kosong, itu akan melihat ke file tema dan menarik CSS itu untuk dikompilasi.

Pengaturan ini dapat dikonfigurasi, jadi ada banyak cara untuk sampai ke tujuan Anda yang akan mengubah jalur yang perlu Anda ambil. Tetapi untuk solusi pengaturan khusus Anda:

  1. Hapus file dari pub/staticfolder:rm -rf pub/static/*

  2. Hapus file dari var/view_preprocessedfolder:rm -rf var/view_preprocessed/*

  3. Kompilasi ulang folder statis pub: php bin/magento setup:static-content:deploy

  4. Kosongkan cache diaktifkan: php bin/magento cache:clean

  5. Refresh browser.


1
akan lebih baik jika magento2 akan membuat symlink ke file-file yang terpengaruh dalam mode pengembang, kemudian perubahan dalam file-file modul di mana terlihat dengan cepat
roman204

Memang, tapi saya belum mengerti kapan dan bagaimana, os saya tidak mengemukakan ini dalam jawabannya. Ada file konfigurasi global yang dapat mengatur ini di app/etc/di.xmlfile di.xml ( ) Anda. Tetapi saya memiliki hasil yang beragam saat pengujian. Ada sedikit lebih di sini di jawaban kedua: magento.stackexchange.com/questions/116605/...
circlesix


5
  1. Hapus pub statis.
  2. Berikan pub/static777 izin
  3. Kosongkan cache.
  4. Lari: php bin/magento setup:static-content:deploy

Anda akan melihat css baru.

CATATAN:

Berikan izin folder dan file yang tepat.

Saya harap ini akan membantu Anda.


"Kamu akan melihat css baru." - Aku tidak berterima kasih
Barry

4

Tidak bisakah Anda hanya membersihkan cache statis di panel admin dan kemudian

run php bin/magento setup:static-content:deploy

1

Pastikan Anda menggunakan mode pengembang.

Kemudian jalankan kode berikut:

chmod -R 777 var generated pub/static
grunt exec:default
grunt less:your_theme_name

Refresh halaman frontend, Langkah-langkah ini menyelesaikan masalah saya.


bagus, itu sangat membantu saya terima kasih
Yoesoff

0

Namun, Anda dapat menambahkan -fatau --forcemenandai ke perintah pengaturan.

Contoh:

php bin/magento setup:static-content:deploy -f

0

Aku akan menjatuhkan tetesan kebijaksanaanku di sini.

Saya menggunakan cache_fly.shskrip bash yang dasarnya:

#!/bin/bash
start=`date +%s%N`
./magento setup:upgrade && \ 
./magento cache:flush && \ 
./magento setup:static-content:deploy -f
end=`date +%s%N`
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"

CATATAN: Saya telah menambahkan gema untuk menunjukkan kepada saya berapa banyak waktu dalam hidup saya yang telah saya sia-siakan untuk menjalankannya. Juga ./magentoadalah skrip untuk melakukan php bin/magentoatau memanggil hal yang sama di dalam wadah buruh pelabuhan, jika buruh pelabuhan digunakan Anda bisa membuat milik Anda atau menunjuk ke php bin/magentotetapi jika Anda membaca ini Anda harus tahu apa yang saya bicarakan, jika tidak, silakan jalankan bertanya untuk bantuan.


0

Sedikit adaptasi untuk kasus saya

#!/bin/bash
start=`date +%s%N`
chmod -R 775 pub/static/ var/ pub/media/ && \
rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* var/tmp/* var/generation/* pub/static/frontend/* && \
./magento cache:flush && \
./magento setup:upgrade && \
./magento cache:clean && \
./magento s:s:d es_ES en_US -f && \
./magento setup:di:compile && \
chmod -R 775 pub/static/ pub/media/ var/
end=`date +%s%N
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.