Menggabungkan Lab Pola dengan Gulp untuk Peningkatan Alur Kerja

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

Apakah Anda dan tim Anda bekerja dengan panduan gaya? Apakah Anda memiliki dokumentasi untuk modul Anda? Jika tidak, jangan panik Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana meningkatkan cara Anda bekerja dengan tim Anda. Kami akan mengeksplorasi konsep yang disarankan oleh Brad Frost dan Dave Olsen, menggunakan Pattern Lab untuk membuat panduan gaya, dengan Gulp untuk menangani aset. Mari kita mulai!

Apa itu Gulp?

Gulp.js adalah sistem membangun streaming dan task runner. Konsep pentingnya adalah Anda memiliki aliran tempat Anda menentukan banyak hal untuk file Anda. Lebih cepat daripada mengelola sesuatu secara manual, menghemat tenaga Anda dan menghemat waktu. Misalnya, dalam tutorial ini kami akan memasukkan semua file Sass kami ke dalam pipe (proses):

kompilasi Sass ke CSS,
menggabungkan CSS file,
memperkecil output,
dan memindahkan semuanya ke lokasi lain

Untuk mempelajari lebih lanjut tentang dasar-dasar Gulp, lihat panduan pemula Kezz Bracey The Command Line for Web Design: Automation with Gulp.

Apa yang dimaksud dengan Pattern Lab?

Pattern Lab adalah konsep untuk menciptakan sistem desain atomic; membangun modul bukannya membangun halaman secara langsung. Ini mendefinisikan beberapa komposit bagian:

atom
molekul
organisme
template
Halaman

Anda mulai dengan elemen terkecil, membangun ke bagian yang lebih besar, sampai Anda memiliki halaman penuh. Pendekatan ini membantu Anda menghemat waktu, berkolaborasi, dan menjamin struktur yang solid.

Atom

Atom tidak dapat dipecah menjadi potongan-potongan kecil.

Ini adalah blok yang paling sederhana, termasuk tag fundamental seperti daftar, warna, font, animasi, dll.

Molekul

Molekul adalah kelompok unsur yang berbeda (atom) yang berfungsi bersama seperti satu unit.

Misalnya, promosi dengan judul, gambar, paragraf, dan tautan seperti "Baca selengkapnya". Masing-masing adalah elemen tunggal, tetapi bersama-sama mereka menjadi sebuah molekul; bagian dari sistem yang lebih besar dan lebih kompleks.

Organisme

Organisme adalah kelompok elemen (atom dan molekul) dan bekerja seperti sebuah bagian di situs web Anda.

Pikirkan, misalnya, dari sebuah header situs web. Ini adalah sistem yang lebih besar, dibangun dari molekul seperti bentuk pencarian dan navigasi, yang keduanya pada gilirannya dibangun dari atom yang lebih kecil.

patternlab header organism — Organisme header Pola Lab, terlihat di layar kecil

Lihat demo UI online dan rasakan seluruh sistem.

Biarkan Sihir Terjadi!

Sekarang saatnya menggabungkan kedua sistem ini dan membuat alur kerja untuk tim Anda. Pola Lab akan memberi kita HTML dan mengantarkan UI sederhana, Gulp akan menangani semua aset yang kita butuhkan.

Fitur utama kita:

Sass-kompilasi (Libsass)
Server (Browser-Sync)
Livereload
Mengecilkan (Javascript, CSS, dan gambar)
Melepaskan / penyebaran
- Bump up versi
- Penandaan
- Mendorong file dan tag untuk endpoint
- Dorong file melalui rsync ke server

Pengenalan

Untuk menggunakan Gulp Anda harus terlebih dahulu memiliki node.js di sistem Anda. Jika tidak, lihat Kezz Bracey, The Command Line for Web Design: Mengikat Paket Pihak ke-3 untuk instruksi penyiapan.

Mari kita mulai dengan menginstal Gulp.js secara global. Di terminal, ketik:

1	npm install gulp -g

Sekarang kita perlu mengkloning repositori Patternlab untuk memberi kita dasar untuk bekerja.

1	git clone git@github.com:pattern-lab/patternlab-php.git

Selanjutnya kita perlu gulp file setup tugas kita. Buat gulpfile.js di root folder proyek Anda. Setelah itu kita memerlukan file konfigurasi, di mana kita mendefinisikan semua jalur, jadi buatlah build.config.json di folder Anda.

File-file berikut diperlukan juga:

.bowerrc
package.json
bower.json

Setelah semua langkah dasar ini, kami memiliki struktur proyek dasar. Sekarang mari kita mulai untuk membangun tugas alur kerja kita.

Mulailah dengan Gulpfile

Di bagian atas file gulpfile.js, kita memerlukan setiap dependensi. Jika Anda menginstal sebuah plugin, Anda harus "membutuhkan" dan memberinya sebuah nama.

Mulailah dengan gulp dan configfile kita untuk semua jalur dan konfigurasi.

1	var gulp = require('gulp'),
2	config = require('./build.config.json');

Selama proses pengembangan kami, kita tidak perlu mengecilkan kode (itu buang-buang waktu kecuali kita siap untuk menerapkan). Dengan variabel production berikut, kita dapat mengaktifkan dan menonaktifkan beberapa tugas. Anda akan melihat ini dalam tindakan nanti.

1	// Production Handling
2	// Description: Use 'production' variable with 'gulpif'
3	// Toggle minifing and optimization for assets
4	var production;

Dengan pengaturan hal-hal, kita sekarang dapat mulai menambahkan berbagai tugas untuk membantu kita dalam pengembangan!

Tugas 1: Membersihkan semua aset

// Install needed dependency
npm install gulp-clean

// Require dependency
var clean = require('gulp-clean');

Jika Anda menghapus gambar dari folder “sumber /”, Anda akan menemukan ada salinan gambar di “publik /” juga. Karena duplikasi ini, kita akan melakukan langkah sederhana untuk membersihkan folder gambar di "publik /".

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

Tugas 2: Menangani Skrip

// Install needed dependencies
npm install gulp-concat gulp-uglify gulp-rename

// Require dependencies
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

Untuk tujuan penerapan, penting untuk hanya memiliki satu file dengan semua skrip. Untuk mencapai hal ini, kita akan menggunakan plugin tegukan-concat dan menggabungkan semua skrip kami untuk menghasilkan application.js. Jika produksi variabel benar, maka application.js akan menjadi uglified dan mendapatkan nama baru: application.min.js.

gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Tugas 3: Font

Tugas ini akan mendorong semua font ke folder publik. Tidak ada yang lain.

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Tugas 4: Gambar

Untuk langkah ini, kami akan memasang dan memerlukan plugin gulp-imagemin. Setelah selesai, kita dapat menggunakannya untuk memperkecil gambar. Ini akan menghemat memori dan meningkatkan kinerja.

// Install imagemin
npm install gulp-imagemin

// Require dependencies
var imagemin = require('gulp-imagemin');

Jika produksi variabel benar, maka semua gambar akan diperkecil. Setelah selesai, kita mendorong mereka ke folder tujuan.

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Tugas 5: Menangani Sass

Mari instal dan minta dependensi gulp-sass dan gulp-cssmin.

// Install needed dependencies
npm install gulp-sass gulp-cssmin

// Require dependencies
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');

Sekarang kita akan mengambil semua file Sass, gunakan plugin Sass untuk mengkompilasinya ke CSS, kemudian jika produksi variabelnya benar, cssmin akan melakukan hal tersebut.

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Tugas 6: Server Lab Pola

Lab Pola memiliki server sendiri, yang dapat Anda mulai dengan perintah shell sederhana. Untuk menjalankan perintah ini kita memerlukan plugin gulp-shell.

// Install needed dependencies
npm install gulp-shell

// Require dependencies
var shell = require('gulp-shell');

Pada titik ini, kita akan menyalin folder panduan gaya dari inti ke publik. Pada titik ini, Anda akan dapat melihat front-end yang kuat di browser.

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

Tugas 7: Mulai Server dan Perhatikan File

Lab Pola memiliki server internal, tetapi Browser-Sync menangani injeksi perubahan CSS tanpa memuat ulang halaman.

// Install needed dependencies
npm install browser-sync gulp-watch

// Require dependencies
var browser-sync = require('browser-sync');
var watch = require('gulp-watch');

Pengamat menangani perubahan dan memicu tugas-tugas tertentu. Setelah itu, browser-sync pembaruan pandangan kami dalam browser.

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

Kita menentukan file untuk pengamat dan memicu tugas-tugas yang kami butuhkan jika terjadi perubahan.

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );
  
  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

Tugas 8: Tugas-Default

Menulis gulp di shell memicu tugas default. Tapi sebelum Gulp memulai ini, itu memicu clean:before tugas untuk membersihkan semua file publik.

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

Tugas 9: Mulai Proses

Mari buat tugas untuk dikembangkan di panduan gaya, tetapi tanpa mengurangi aset. Ini memicu browser-sync, membangun semua aset, dan memulai pengamat.

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

Tugas 10: Melepaskan dan penandaan

Untuk langkah ini, kita memerlukan beberapa plugin baru.

Plugin gulp-bump adalah untuk memperbarui nomor versi.
gulp-filter akan memberi kita file spesifik dari aliran.
gulp-git memungkinkan kita untuk menggunakan pernyataan git di gulp.
Dan versi gulp-tag adalah untuk menghasilkan tag.

// Install needed dependencies
npm install gulp-bump gulp-filter gulp-git gulp-tag-version

// Require dependencies
var bump = require('gulp-bump');
var filter = require('gulp-filter');
var git = require('gulp-git');
var tagversion = require('gulp-tag-version');

Sekarang Anda menentukan release gulp-task, mengatur produksi variabel menjadi true (sekarang kita perlu mengecilkan) dan membuka aliran. Anda harus mengambil semua file dengan nomor versi, gunakan plugin bump dan memungkinkan untuk menentukan jenis (patch, minor atau major) melalui parameter di shell.

Jika Anda menjalankan tugas release tanpa tipe, gulp-bump akan mengambil patch - x.x.1. Setelah ini Anda mendorong file ke root dan melakukan perubahan. Sekarang saatnya membuat tag baru untuk proyek tersebut. File pakage.json diperlukan untuk mendapatkan nomor versi saat ini untuk tag baru.

Akhirnya, kita mendorong semua file dan tag asal dan cabang yang kita inginkan.

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

Tugas 11: Deployment

Memungkinkan untuk menerapkan semua file ke server melalui rsync; melakukannya sangat cepat dan nyaman. Ketikkan gulp deploy di terminal Anda dan setelah beberapa detik Anda memiliki proyek lokal di server. Anda tidak perlu untuk drag dan drop folder secara manual. Mengotomatisasi semua hal. Anda menentukan host dan jalur folder, yang ingin Anda terapkan di build.config.js.

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

Akhir Gulpfile

Anda sudah menulis banyak kode, dan ini hasil akhirnya! Anda dapat memilih untuk memiliki file terpisah untuk setiap tugas, dalam hal ini Anda dipersilakan untuk memisahkannya. Dalam hal ini, demi kesederhanaan, kita akan menampilkan semuanya dalam Gulpfile tunggal:

var gulp        = require('gulp'),
    bump        = require('gulp-bump'),
    clean       = require('gulp-clean'), 
    concat      = require('gulp-concat'),
    browserSync = require('browser-sync'),
    cssmin      = require('gulp-cssmin'),
    filter      = require('gulp-filter'),
    git         = require('gulp-git'),
    gulpif      = require('gulp-if'),
    imagemin    = require('gulp-imagemin'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    shell       = require('gulp-shell'),
    tagversion  = require('gulp-tag-version'),
    uglify      = require('gulp-uglify'),
    config      = require('./build.config.json');

// Trigger
var production;

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

// Task: Handle scripts
gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );

  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

ConfigFile

Sekarang kita memerlukan konfigurasi untuk mengatur berbagai jalur. File ini diperlukan untuk mempertahankan jalur dan konfigurasi proyek:

{
  "root": "./public",
  "deployment": {
    "local": {
      "path": "public"
    },
    "remote": {
      "host": "YOUR HOST"
    },
    "rsync": {
      "options": "-avzh --delete -e ssh"
    }
  },
  "assets": {
    "base": "source/assets/",
    "dest": "public/assets/"
  },
  "versioning": {
    "files": [
      "./package.json",
      "./bower.json"
    ]
  },
  "scripts": {
    "base"  : "source/assets/javascripts/",
    "files" : [
      "source/assets/javascripts/**/*.js"
    ],
    "dest"  : "public/assets/javascripts/"
  },
  "components": {
    "base": "source/assets/components/"
  },
  "scss": {
    "base" : "source/assets/scss/",
    "files": [
      "source/assets/scss/**/*.scss"
    ],
    "dest" : "public/assets/stylesheets/"
  },
  "fonts": {
    "base" : "source/assets/fonts/",
    "files": [
      "source/assets/fonts/**/*"
    ],
    "dest" : "public/assets/fonts/"
  },
  "images": {
    "base" : "source/assets/images/",
    "files": [
      "source/assets/images/**/*"
    ],
    "dest" : "public/assets/images/"
  },
  "patternlab": {
    "styleguide": {
      "files": [
        "core/styleguide/**"
      ],
      "dest": "public/styleguide/"
    },
    "files": [
      "source/_patterns/**/*.mustache",
      "source/_patterns/**/*.json",
      "source/_data/*.json"
    ]
  }
}

Kesimpulan

Saya suka bekerja dengan kombinasi Gulp dan Pattern Lab. Saya telah bekerja di tim yang berbeda dan menetapkan dasar ini untuk setiap proyek. Umpan balik oleh setiap anggota tim selalu positif karena prosesnya mudah diikuti. Setiap orang memiliki permukaan yang solid, dapat memilih modul dan menggunakannya dengan mudah. Untuk pertanyaan atau feedback, silakan lihat bagian komentar di bawah ini.