npm instal gulp-save-dev
Apa itu tegukan?
Gulp adalah generasi baru alat pembangunan proyek front-end. Anda dapat menggunakan Gulp dan pluginnya untuk mengkompilasi kode proyek Anda (lebih sedikit, sass), dan juga dapat memampatkan kode JS dan CSS Anda, dan bahkan mengompres gambar Anda. Gulp hanya memiliki sedikit API, jadi sangat mudah dipelajari. Gulp menggunakan aliran untuk memproses konten. Node telah melahirkan sejumlah alat otomatisasi, seperti Bower, Yeoman, Grunt, dll.
Persamaan dan perbedaan antara tegukan dan gerutuan
Mudah digunakan: Menggunakan kode over strategi konfigurasi, Gulp membuat hal -hal sederhana sederhana dan kompleks yang dapat dikelola.
Efisien: Dengan memanfaatkan aliran node.js yang kuat, Anda dapat menyelesaikan konstruksi lebih cepat tanpa menulis file perantara ke disk.
Kualitas Tinggi: Pedoman Plugin Gulp yang ketat untuk memastikan bahwa plugin itu sederhana dan berfungsi seperti yang Anda harapkan.
Mudah dipelajari: Dengan meminimalkan API, Anda dapat belajar tegukan dalam waktu yang sangat singkat. Pekerjaan build seperti yang Anda bayangkan: Ini adalah serangkaian pipa aliran.
Karena Gulp ditulis di Node.js, Anda perlu menginstal NPM di terminal Anda. NPM adalah manajer paket node.js, jadi pertama -tama instal node.js di mesin Anda.
Perintah Instalasi Gulp
sudo npm instal -g gulp
Buat file package.json baru di direktori root
Init NPM.
Instal Paket Gulp
Setelah instalasi, masukkan gulp -v lagi untuk melihat nomor versi, seperti yang ditunjukkan pada gambar berikut, itu berhasil:
Pasang plug-in
Pasang plugin yang umum digunakan:
Kompilasi Sass (Gulp-Ruby-Sass)
Secara Otomatis Tambahkan Awalan CSS (Gulp-Autoprefixer)
CSS terkompresi (Gulp-Minify-CSS)
Verifikasi Kode JS (Gulp-Jshint)
Gabungkan file JS (Gulp-Concat)
Kode JS terkompresi (Gulp-Uglify)
Gambar terkompresi (gulp-imagemin)
Secara otomatis menyegarkan halaman (gulp-livereload)
Cache gambar, hanya jika gambar diganti (Gulp-Cache)
Ubah Pengingat (Gulp-Notify)
Hapus file (del)
Untuk menginstal plugin ini, Anda perlu menjalankan perintah berikut:
Salinan kode adalah sebagai berikut:
$ npm Instal Gulp-Ruby-Sass Gulp-Autoprefixer Gulp-Minify-CSS Gulp-Jshint Gulp-Concat Gulp-Uglify Gulp-Imagemin Gulp-Notify Gulp-Rename Gulp-Livereload Gulp-Cache Del --Save-Devel
-save dan -save -dev dapat menyimpan Anda langkah -langkah untuk memodifikasi file package.json secara manual.
NPM Instal Modul -Name -Save
Secara otomatis menambahkan nomor modul dan versi ke dependensi
NPM Instal Modul-Name -Save-Dev
Secara otomatis menambahkan nomor modul dan versi ke bagian DevDependencies
perintah tegukan
Anda hanya perlu mengetahui perintah 5 tegukan
gulp.task (nama [, deps], fn) Tentukan nama tugas: Nama tugas DEP: Ketergantungan Nama Tugas FN: Fungsi Callback
gulp.run (tugas ...): Jalankan beberapa tugas secara paralel sebanyak mungkin
Gulp.Watch (Glob, FN): Saat konten global berubah, jalankan FN
gulp.src (glob): Atur jalur ke file yang akan diproses, yang dapat berupa beberapa file dalam bentuk array, atau bisa teratur
gulp.dest (path [, opsi]): Atur jalur untuk menghasilkan file
Glob: Bisa menjadi jalur file langsung. Artinya adalah pencocokan pola.
File yang akan diproses oleh Gulp Guides terkait plugin melalui pipa (pipa ()) API. Jalankan tugas pemrosesan file melalui plug-in.
gulp.task ('default', function () {...});API Gulp.Task digunakan untuk membuat tugas. Anda dapat memasukkan $ gulp [default] pada baris perintah (opsional untuk kurung) untuk melakukan tugas di atas.
Dokumentasi API Resmi Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Koleksi plug-in Gulp: http://gulpjs.com/plugins/
Mulailah membangun proyek
Buat file GulpFile.js baru di direktori root proyek dan tempel kode berikut:
// memperkenalkan plugin Gulp dan Uglify di direktori root proyek var gulp = membutuhkan ('gulp'); var uglify = membutuhkan ('gulp-uglify'); gulp.task ('compress', function () {return gulp.src ('script/*. Js') .pipe (uMlify ().Catatan: Nama file GulpFile.js tidak dapat diubah.
Proyek perlu menggunakan UGLIFY dan mengganti nama plug-in, dan menjalankan perintah berikut untuk menginstal:
instalasi npm --save-dev gulp-uglifynpm instal-save-dev gulp-rename
Ambil contoh saya, masukkan direktori di mana gulpfile.js berada:
CD/USERS/TRIGKIT4/TEST GULP
Kemudian masukkan:
var gulp = membutuhkan ('gulp'); var uclify = membutuhkan ('gulp-uglify'); var rename = membutuhkan ('gulp-rename'); gulp.task ('compress', function () {return gulp.src ('skrip/*. .pipe (gulp.dest ('dist'));});Perintah ini akan menginstal semua dependensi di bawah package.json, seperti yang ditunjukkan pada gambar berikut:
Lengkapi Gulpfile.js
// Muat plug-in var gulp = memerlukan ('gulp'), sass = membutuhkan ('gulp-ruby-sass'), autoprefixer = membutuhkan ('gulp-autoprefixer'), minifycss = membutuhkan ('gulp-minify-css'), jshint = membutuhkan ('gulp-jshint'), uChiny = uchin = 'gulpin' ('gulp-jshint'), uCliny = uchin = uchin = 'gulpin' ('gulp-jshint'), uCliny = uchin = uchin = uchin = 'gulpin' ('gulp-jshint'), uCliny = uPlIFE = '), JSHINT = gulp-gulp-jshint'), uCliny = ' Membutuhkan ('gulp-imagemin'), ganti nama = membutuhkan ('gulp-rename'), clean = membutuhkan ('gulp-clean'), concat = membutuhkan ('gulp-concat'), notify = membutuhkan ('gulp-notify'), cache = memerlukan ('gulp-cache'), livereload = memerlukan ('gulp-liver-liver-load; // style gulp.task ('styles', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'Expanded',})) .pipe (autoprefixer ('2 Versi Terakhir', 'Safari 5', 'IE 8', '' '),' 1, ''), 'IE 9'), 'IE 9', 'IE 9', 'IE 9', 'IE 9', 'IE 8', 'IE 9', 'IE 9', 'IE 9, .pipe (gulp.dest ('dist/styles')) .pipe (ganti nama ({suffix: '.min'})) .pipe (minifyCss ()) .pipe (gulp.dest ('dist/styles')) .pipe (notify ({pesan: 'styles tugas lengkap'});}); // skrip gulp.task ('skrip', function () {return gulp.src ('src/skrip/**/*. Js') .pipe (jshint ('. Js')) .pipe (jshint ('. .pipe (concat ('main.js')) .pipe (gulp.dest ('dist/scripts')) .pipe (ganti nama ({suffix: '.min'})) .pipe (Uglify ()) .pipe (gulp.dest ('dist/scripts')) .pipe (notify (oMerping: ' // Image gulp.task ('gambar', function () {return gulp.src ('src/gambar/**/*') .pipe (cache (imagemin ({optimizationLevel: 3, progresif: true, interlaced: true}))) .pipe (gulp.dest ('dist/gambar'). // Bersihkan gulp.task ('clean', function () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/images'], {baca: false}) .pipe (clean ());}); // preset tugas gulp.task ('default', ['clean'], function () {gulp.start ('styles', 'skrip', 'gambar');}); // Guard gulp.task ('watch', function () {// jaga semua file .scss gulp.watch ('src/styles/**/*. Scss', ['styles']); // jaga semua file .js gulp.watch ('src/scripts/**/**. Gulp.Watch ('SRC/SCRIP/**/*. JS', ['Script']); gulp.watch (['dist/**']). on ('ubah', fungsi (file) {server.changed (file.path);}); });CATATAN: PIPE () adalah metode untuk melewati aliran data dalam modul aliran. Parameter pertama adalah metode plug-in. Plug-in akan menerima file yang mengalir dari hulu, proses dan kemudian mengalir ke bawah.
gulp.task ('nama tugas', fungsi () {return gulp.src ('file path') .pipe (...) .pipe (...) // sampai langkah terakhir dari tugas.pipe (...);});plugin tegukan
GULP-GH-PAGES: Gunakan Gulp untuk menghasilkan dokumen HTML dengan penurunan harga dan unggah ke halaman git
https://github.com/shinnn/gulp-gh-pages
var gulp = membutuhkan ('gulp'); var ghpages = membutuhkan ('gulp-gh-halaman'); gulp.task ('deploy', function () {return gulp.src ('./ dist/**/*') .pipe (ghpages ());});Plugin Gulp-Jade: Kompilasi Jade ke dalam file HTML
Plugin Gulp-Less: Kompilasi lebih sedikit ke dalam file CSS
var less = membutuhkan ('gulp-less'); var path = membutuhkan ('path'); gulp.task ('less', function () {return gulp.src ('./ Less/**/*. Less') .pipe (lebih sedikit ({Paths: [Path.join (__ dirname, 'Less', 'termasuk, light-lighter = gulper (gulp.dest (' ./ publik/css '));}; membutuhkan ('tego'); var gls = membutuhkan ('gulp-live-server'); gulp.task ('sajikan', function () {// 1. Sajikan dengan pengaturan default var server = gls.static (); // sama dengan gls.static ('public', 3000); server.start (); // 2. Sajikan di port kustom server = gls.static ('dist', 8888); server.start (); /server var. '.tmp']);Gulp-Livereload dapat menyimpan dan menyegarkan secara real time, jadi tidak perlu menekan F5 dan mengganti antarmuka
Gulp-Load-Plugins: Secara otomatis memuat plugin Gulp arbitrer di file package.json Anda
$ npm instal-save-dev gulp-load-plugins
Misalnya, file package.json yang diberikan adalah sebagai berikut:
{"Dependencies": {"gulp-jshint": "*", "gulp-concat": "*"}}Tambahkan kode berikut di GulpFile.js:
var gulp = memerlukan ('gulp'); var gulploadplugins = membutuhkan ('gulp-load-plugins'); var plugins = gulploadplugins (); plugins.jshint = membutuhkan ('gulp-jshint'); plugins.concat = membutuhkan ('gulp-concat');Gulp-Babel: Plugin Babel Gulp,
$ npm instalasi-Save-dev Gulp-Babel Babel-Preset-ES2015
Bagaimana menggunakan:
const gulp = membutuhkan ('gulp'); const babel = membutuhkan ('gulp-babel'); gulp.task ('default', () => {return gulp.src ('src/app.js') .pipe (Babel ({presets: ['Es2015']})) .pipe (gulp.dest ({{presets: ['ES2015']}))) .pipe (gulp.Github resmi: https://github.com/gulpjs/gulp