Saya tahu tentang Sass dan Gulp dan manfaatnya, tetapi saya tidak tahu bagaimana cara menggunakannya

Jelas, saya tahu mereka membutuhkan git, tapi di situlah pengetahuan saya berakhir.

Katakanlah saya memiliki file .scss yang telah saya edit dan saya ingin mengkompilasinya dan meletakkannya di server jarak jauh saya untuk melihat tampilannya. Apa sekarang?

Ada sangat sedikit informasi tentang bagaimana sebenarnya melakukan ini. Sama dengan Gulp.

Saya merasa saya kehilangan semacam perantara di sini.

Adakah yang bisa mengarahkan saya ke arah yang benar?

1. Instal Node.js
2. Instal Gulp secara global dengannpm install gulp-cli --global
3. Buat direktori baru untuk tugas Gulp Anda dan file Sass
4. Di dalam folder itu inisialisasi npm dengannpm init
5. Instal Gulp dan Sass dengan npm install gulp gulp-sass --save-dev
6. Buat gulpfile.jsdengan konten berikut:

var meneguk = membutuhkan ('tegukan')

var sass = membutuhkan ('tegukan-sass')

gulp.task ('scss', function () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (gulp.dest ('./ build / css'))
})

gulp.task ('default', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

7. Buat folder bernama scssdengan file bernamamain.scss
8. Sekarang Anda dapat membangun gulpdan menontonnyagulp watch

Saya sarankan Anda juga menggunakan PostCSS dengan cssnext untuk perbaikan-kembali otomatis dan tegukan-bersih-css untuk memperkecil CSS Anda. Untuk menggunakannya Anda harus melakukan hal-hal berikut:

1. Instal dengan npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Ubah Anda gulpfile.jsmenjadi yang berikut:

var meneguk = membutuhkan ('tegukan')

var cssnext = membutuhkan ('postcss-cssnext')
var cleancss = butuhkan ('tegukan-bersih-css')
var postcss = membutuhkan ('tegukan-postcss')
var sass = membutuhkan ('tegukan-sass')

gulp.task ('scss', function () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (postcss ([cssnext ()]))
  .pipe (cleancss ())
  .pipe (gulp.dest ('./ build / css'))
})

gulp.task ('default', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

Saya juga merekomendasikan Anda untuk membaca ini untuk mempelajari tentang Sass bascis.

Ada beberapa situs web yang memiliki video tentang cara menggunakan berbagai komponen pengembangan web. Berikut adalah daftar tempat menurut abjad, tempat seseorang dapat menonton serangkaian video tentang berbagai subjek pemrograman:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (Cukup cari Git atau Gulp, Pengembangan Web, dll ...)

Untuk Git , Anda ingin mendapatkan salah satu dari perangkat lunak ini karena mereka memiliki GUI visual:

1. GitHub
2. SmartGit
3. SourceTree Atlassian

CLI (Command Line Interface) lebih untuk pengguna yang lebih kuat. Setidaknya Anda dapat mulai mempelajari cara kerja Git, dengan melihat cara kerja percabangan & penggabungan. Ini adalah halaman resmi tentang cara kerja Git Branching . Ilustrasi akan membantu memahami label / tag cabang, yang digunakan perangkat lunak. Ini bukan proses yang mudah untuk belajar tentang Git ... tetapi dengan sedikit kerja & kesabaran, Anda dapat mengambilnya sebagai keterampilan untuk keahlian Anda.

Saas adalah sistem build fleksibel untuk file CSS. Ini memungkinkan Anda untuk menambahkan sedikit logika ke file CSS Anda sebagai template dan membuatnya lebih mudah untuk mengubah nilai-nilai tertentu saat membangun. Salah satu contoh adalah di mana Anda ingin mengubah warna font untuk sejumlah besar elemen, metode sebelumnya adalah pergi melalui file CSS dan mengubah setiap aturan CSS secara terpisah dan bisa memakan waktu lama, metode baru dengan Saas jika Anda menggunakannya untuk tentukan nilai dalam file .scss sebagai variabel dan untuk menentukannya di bagian atas dokumen atau melalui konfigurasi, maka ketika Anda membuat file .scss menjadi file .css, variabel diganti dengan nilai yang diwakilinya. ( http://sass-lang.com/ )

Gulp hanyalah sistem otomasi bangunan. Gulp dapat digunakan dari dalam sejumlah IDE dan berbagai bahasa dan dipasarkan sebagai toolkit untuk membantu mengotomatiskan tugas-tugas yang memakan waktu dalam alur kerja pengembangan. ( http://gulpjs.com/ )