Baris Perintah untuk Desain Web: Otomatis dengan Gulp

() translation by (you can also view the original English article)

Dalam tutorial sebelumnya kita setup sebuah proyek dan digunakan kasar untuk menonton dan secara otomatis menyusun Stylus dan Jade. Dalam tutorial ini kami akan dapat melakukan hal yang sama, tetapi menggunakan seorang pelari berbeda tugas: Gulp.

Memulai dengan Gulp

Menginstal Gulp

Instal Gulp secara global dengan;

1	[sudo] npm install gulp -g

Setup proyek untuk Gulp

Tambahkan package.json file

Seperti dengan proses kasar, menambahkan "package.json" file untuk proyek Anda menggunakan perintah init npm.

Menginstal paket Gulp

Menginstal Gulp ke proyek Anda dan menyimpannya sebagai pengembangan ketergantungan dengan:

1	npm install gulp --save-dev

Tambahkan gulpfile.js

Dalam paralel dengan kasar 's "Gruntfile", meneguk menggunakan "Gulpfile". Untuk root folder dari Anda "Gulp Project" Tambahkan file bernama "gulpfile.js".

Untuk memulai, kami akan memberikan akses file ke paket "gulp" Anda hanya menginstal ke folder "node_modules", dengan menambahkan baris ini ke atas Gulpfile Anda:

1	var gulp = require('gulp');

Install Gulp Plugins

Sebenarnya, Gulp tidak perlu menggunakan plugin Gulp karena benar-benar dapat menggunakan paket npm vanili. Namun, ada beberapa plugin yang tersedia yang khusus dioptimalkan untuk penggunaan dengan Gulp, dan ketika Anda mulai keluar Anda akan menemukan ini mudah digunakan.

Cari untuk Gulp plugin di: http://gulpjs.com/plugins/

Kita akan menginstal plugin ini:

Pligin ini berfungsi pada dasarnya sama dengan peran yang kami gunakan dengan Grunt, dengan beberapa perbedaan.

Satu, kami tidak perlu menginstal plugin "watch" karena Gulp memiliki satu built in.

Kedua, kita sedang menginstal plugin "gulp-concat" untuk menarik semua file kita bersama (menggabungkan mereka) sebelum kita mengecilkan seluruh banyak. Terima kasih dan untuk menunjuk hal ini!

Catatan: kita menggunakan nama "gulp-minify-css" plugin tetapi mempekerjakan paket "clean-css" yang sama yang Anda telah digunakan.

Dengan terminal Anda menunjuk pada folder "Gulp Project" menjalankan setiap perintah ini:

1	npm install gulp-stylus --save-dev

1	npm install gulp-autoprefixer --save-dev

1	npm install gulp-minify-css --save-dev

1	npm install gulp-jade --save-dev

1	npm install gulp-uglify --save-dev

1	npm install gulp-concat --save-dev

Ketika Anda sudah selesai, Anda harus melihat folder ini di dalam proyek Anda "node_modules" folder:

Mengaktifkan plugin melalui Gulpfile

Seperti yang kita lakukan dengan kasar, kita perlu mengaktifkan masing-masing plugin, kali ini di Gulpfile kami. Bukan Grunt's method grunt.loadNpmTasks, kita akan menggunakan fungsi require asli NodeJS.

Tambahkan baris ini ke Gulpfile Anda, di bawah garis Anda sudah ditambahkan.

var stylus = require('gulp-stylus');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var jade = require('gulp-jade');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

Pendekatan ini berbeda untuk kasar yang kita belum memiliki apa pun perintah yang terdaftar yang dapat dijalankan pada tahap ini. Sebaliknya, kami telah menciptakan variabel JavaScript, masing-masing mewakili plugin kami, yang dapat kita gunakan nanti dalam Gulpfile kami.

Mengkonfigurasi & menjalankan tugas di Gulpfile

Salah satu perbedaan utama antara kasar dan Gulp adalah bahwa dengan Gulp Anda tidak perlu mengkonfigurasi secara individual tugas untuk setiap plugin Anda menggunakan dalam proyek Anda. Sebaliknya, Anda hanya mengkonfigurasi tugas untuk perintah sebenarnya yang Anda ingin menjalankan.

Stylus, Autoprefixer & minifyCSS

Di Gruntfile kami sebelumnya kami setup tugas terpisah yang masing-masing untuk Stylus, Autoprefixer dan clean-css. Di Gulpfile kita, kita tidak perlu untuk melakukan hal ini. Kita tahu bahwa setiap kali kami menyusun kode Stylus kita kita ingin dihasilkan CSS menjadi autoprefixed dan minified, sehingga kita akan membuat satu satu tugas untuk melakukan semua hal sekaligus.

Tambahkan kode ini ke bagian bawah Gulpfile Anda:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
      .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Mari kita memecah apa yang telah kami lakukan.

Pertama, kita menggunakan gulp.task() untuk menentukan tugas baru bernama css, dan membuat beberapa ruang untuk fungsi JavaScript yang akan dijalankan setiap kali kita jalankan perintah gulp css:

1	gulp.task('css', function () {
2
3	});

Selanjutnya, kita menggunakan gulp.src() untuk mengatur file sumber kami ingin proses ke "source/stylus/main.styl" file:

1	gulp.task('css', function () {
2	gulp.src('source/stylus/main.styl')
3
4	});

Kemudian, kita mulai menggunakan Gulp's pipe() fungsi untuk panggilan pada masing-masing plugin kami. Dengan pipe() adalah seperti pipa fisik, mana Anda makan sesuatu ke dalam pipa pertama dan kemudian melewati setiap pipa yang terhubung.

Pertama "pipe" menambahkan kompilasi Stylus, menggunakan pilihan compress dan paths yang sama seperti yang kita lakukan ketika bekerja dengan kasar sebelumnya:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))

});

Kami kemudian menghubungkan pipa yang kedua, yang mengambil kode dikompilasi dan menambahkan autoprefixing:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())

});

Kami menghubungkan pipa ketiga, mengambil CSS kata kami dan membersihkannya:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())

});

Pada titik ini kalau kita mau output CSS file itu akan bernama "main.css" sesuai dengan sumber yang "main.styl" kami mulai dengan file. Jadi kita akan menghubungkan pipa keempat untuk mengubah nama file kita akan berakhir dengan "style.css":

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))

});

Akhirnya, kami menghubungkan pipa kami kelima dan terakhir untuk mengirimkan file CSS kita selesai untuk tujuan, menggunakan gulp.dest() untuk mengatur folder output kami untuk menjadi "build".

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Sekarang tugas css yang baru Anda buat siap. Dalam proyek folder root Anda menjalankan:

gulp css

.. .dan file Stylus Anda akan dikompilasi, autoprefixed dan dibersihkan kemudian output ke folder "build" sebagai "style.css".

Jade

Kita akan menggunakan proses yang sama lagi untuk setup tugas kita untuk kompilasi Jade. Kami akan membuat tugas bernama html, mengaturnya untuk menggunakan semua ".jade" file dalam folder "source/jade" sebagai sumber, pipa melalui Jade kompilasi, kemudian mengirim file-file HTML yang dihasilkan ke folder "build" kami.

Tambahkan kode ini di bawah tugas css yang baru saja dibuat:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build'))
});

Jalankan tugas baru dengan perintah:

gulp html

.. .dan Anda akan melihat setiap berkas Jade dikompilasi ke dalam file HTML yang sesuai dalam folder "build".

Uglify

Sekarang kita akan menggunakan pendekatan yang sama sekali lagi, pengaturan tugas yang bernama js untuk mengambil jQuery dan Modernizr file dari folder "bower_components" kami, uglify (concatenate dan minify) mereka, kemudian output kode sebagai sebuah file bernama "output.min.js" Kami "build" folder .

gulp.task('js', function() {
  gulp.src([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/modernizr/modernizr.js'
  ])
    .pipe( concat('output.min.js') ) // concat pulls all our files together before minifying them
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

Catatan: dalam kasus ini kita ingin menentukan dua sumber file, sehingga kita lewat nama dua file sebagai array, yaitu koma dipisahkan nilai-nilai antara tanda kurung.

Menjalankan tugas js Anda dengan perintah

gulp js

.. .dan Anda akan melihat sebuah file baru yang bernama "output.min.js" muncul dalam folder "build", yang mengandung jQuery dan Modernizr dalam bentuk minified.

Tambahkan "watch" tugas

Sekarang bahwa kita memiliki kebiasaan css dan html setup tugas kita, kita dapat menggunakan tegukan di dalam built gulp.watch() Sehingga fungsi mereka akan secara otomatis menjalankan untuk kita.

Tambahkan kode ini ke bagian bawah Anda Gulpfile untuk membuat tugas watch:

1	gulp.task('watch', function () {
2	gulp.watch('source/stylus/*.styl', ['css']);
3	gulp.watch('source/jade/*.jade', ['html']);
4	});

Penggunaan pertama dari gulp.watch() menetapkan tugas css akan dijalankan setiap kali file ".styl" di dalam folder "source/stylus" berubah.

Penggunaan kedua gulp.watch() set tugas html task akan dijalankan setiap kali file ".jade" di dalam folder "source/jade" diubah.

Jalankan tugas watch Anda dengan perintah

1	gulp watch

... dan setiap kali Anda menyimpan perubahan ke salah satu fille Stylus atau Jade, kompilasi Anda akan ditangani secara otomatis.

Tambahkan Tugas "default"

Sama seperti yang kami lakukan dengan proyek Grunt, kami akan menyelesaikannya dengan membuat tugas default yang akan berjalan kapan pun kami menggunakan perintah gulp dengan sendirinya.

Tambahkan baris ini ke bagian bawah Gulpfile Anda

1	gulp.task('default', ['css', 'html', 'js']);

Kami menggunakan tugas ini untuk membangun seluruh proyek kami, terrmasuk JavaScript, dengan menjalankan tugas css , html dan js.

Untuk membangun seluruh proyek Anda dengan tugas default, gunakan perintah:

gulp

Di Tutorial Berikutnya

Selanjutnya, kami akan menambahkan sentuhan akhir pada proyek Grunt and Gulp Anda yang benar-benar akan menjadikan mereka mesin efisiensi tertinggi, dan itu adalah live reload dan sinkronisasi browser.

Anda akan belajar cara membuat perintah yang meluncurkan proyek Anda pada pratinjau localhost, yaitu mensimulasikan host web di komputer lokal Anda menggunakan protokol http:// daripada file:// protocol untuk melihat pratinjau situs Anda.

Dan ketika file sumber proyek Anda diawasi untuk perubahan dan dikompilasi secara otomatis, pratinjau localhost Anda secara otomatis akan dimuat ulang sehingga tepat setelah Anda menyimpan perubahan Anda, Anda akan melihatnya ditampilkan di browser.

Kemudian kami juga akan mengatur pratinjau localhost Anda sehingga setiap browser yang Anda lihat di dalamnya akan disinkronkan, termasuk browser di berbagai perangkat pada koneksi internet yang sama seperti tablet dan ponsel. Buka menu di satu browser, lihat bagaimana ia merespons di setiap browser dan perangkat lain pada saat bersamaan.

Sampai jumpa di tutorial selanjutnya!