Instal Node.js
Pertama, Anda perlu menginstal Node.js. Secara umum, Anda hanya perlu mengunduh paket instalasi dan menginstalnya di situs web resmi Node.js. Tapi saya gagal memalukan, dan kesalahan berikut muncul:
Jadi saya berubah menjadi buatan Dafa:
BREW INSTAL NODEJS
Instal Gulp
Gulp diinstal menggunakan perintah NPM Node.js:
NPM Instal -Global Gulp
Kemudian instal di direktori proyek:
instalasi npm --save-dev gulp
Saya cukup bingung tentang langkah ini. Dengan pengalaman bertahun -tahun saya sebagai pembuat kode, bahkan jika instalasi global diinstal, itu harus tersedia di mana menggunakannya. Tapi Gulp jelas tidak seperti itu. Jika Anda tidak melakukan langkah ini di direktori proyek, kesalahan berikut akan diminta saat menggunakan perintah Gulp:
... Local Gulp tidak ditemukan di…
… Coba jalankan: NPM Instal Gulp
Akhirnya, jalankan perintah Gulp di direktori proyek. Jika konten berikut adalah output, itu berarti instalasi selesai:
… Tidak ada Gulpfile yang ditemukan
Contoh sederhana
Berikut ini menunjukkan penggunaan Gulp untuk membangun server pengembangan situs web statis dan mendukung fungsi Live Refresh (LivereLoad).
Pertama, Anda perlu menginstal plug-in browser untuk LivereLoad. Alamat plug-in adalah: http://livereload.com/extensions/, yang mendukung tiga browser utama: Chrome, Firefox, dan Safari. Setelah plug-in diinstal, tombol akan muncul di browser. Tombol ini memiliki dua negara. Titik-titik padat menunjukkan bahwa plug-in diaktifkan, dan titik-titik berongga menunjukkan bahwa plug-in tidak diaktifkan. Ingatlah untuk mengingat!
Kemudian buat struktur proyek sederhana:
./gulpfile.js./public/./public/index.html
Gunakan perintah berikut untuk menginstal gulp dan komponen terkait:
instalasi npm --save-dev gulp gulp-connect
Gulp-Connect adalah plug-in Gulp yang menyediakan fungsi server web statis dan mengintegrasikan fungsi livereLoad.
Selanjutnya, Anda perlu mengedit file GulpFile.js, kontennya adalah sebagai berikut:
var gulp = memerlukan ('gulp'), connect = membutuhkan ('gulp-connect') gulp.task ('server', function () {connect.server ({root: 'public', livereload: true})}) (public ('html', function () {gulp.src (') (public/public/*). gulp.task ('watch', function () {gulp.watch (['./ public/*. html'], ['html'])}) gulp.task ('default', ['watch', 'server'])Akhirnya jalankan server web ini:
meneguk
Buka browser dan kunjungi http: // localhost: 4000. Kemudian coba ubah konten file index.html dan simpan. Dalam keadaan normal, sisi browser harus secara otomatis menyegarkan dan menampilkan konten yang dimodifikasi.
Perbandingan sederhana antara Gulp dan Grunt
Mari kita lihat contohnya, masing -masing buat Sass di Gulp dan Grunt:
Grunt:
Sass: {dist: {options: {style: 'Expanded'}, file: {'dist/asset/css/main.css': 'src/styles/main.scss',}}}, autoprefixer: {dist: {options: {browsers: ['versi 2', ',' ie ',' ie ',' ie ',' i, 'i,' i, 'I,' I, 'I,' I. 'I.' I. ' 12.1 ',' iOS 6 ',' Android 4 ']}, src:' dist/aset/css/main.css ', dest:' dist/aset/css/main.css '}}, grunt.registertask (' styles ', [' sass ',' autoprefixer ']);Grunt perlu mengkonfigurasi plug-in secara terpisah dan menentukan jalur sumber dan tujuannya. Misalnya, kami mengambil arsip sebagai input untuk plug-in sass dan menyimpan hasil output. Saat menyiapkan autoprefixer, Anda perlu menggunakan output SASS sebagai input untuk menghasilkan file baru. Mari kita lihat konfigurasi yang sama di Gulp:
Meneguk:
gulp.task('sass', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'compressed' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe (gulp.dest ('dist/assets/css'))});Di Gulp kita hanya perlu memasukkan file. Setelah pemrosesan plug-in, kemudian diteruskan ke plug-in autoprefixer, dan akhirnya file diperoleh. Proses ini mempercepat proses konstruksi, menghilangkan membaca dan menulis file yang tidak perlu, dan hanya membutuhkan file akhir.