האצת תהליכי פיתוח – סיכום תוכן ההרצאה מכנס 2017 Press4Word

ביום רביעי האחרון, ה-13.9, העברתי הרצאה בכנס Press4Word 2017 בנושא "האצת תהליכי פיתוח".
עקב בקשות רבות, החלטתי לסכם את תוכן ההרצאה והנה, הסיכום לפניכם.

האמת? "ואו".
זו המילה שתסכם עבורי את הכנס שהתרחש במתחם האירועים והכנסים "LAGO" בראשון לציון.
אמנם אני לא הכי אובייקטיבי אבל הכנס היה ברמה גבוהה מאוד, החל מהארגון, מקום האירוע, אנשי הצוות, המרצים ואפילו האוכל 🙂

כאמור, השנה העברתי הרצאה בנושא "האצת תהליכי פיתוח", היכולת לקחת תהליכים פיתוח ולהפוך אותם למהירים יותר ולפעמים אף אוטומוטיים לחלוטין.
לאחר ההרצאה קיבלתי המון הודעות ובקשות שאפרסם את המצגת או את תוכנה ולכן החלטתי לפרסם מאמר סיכום לקוראי הבלוג שלי.

הערה:
מאמר זה הוא סיכום קצר של ההרצאה, בהרצאה הוקרנו 3 הדגמות וידאו על מנת להמחיש לקהל את פעולת התהליכים עצמם, צילומי מסך מפורטים, קטעי קוד נוספים ועוד.

שנתחיל? 🙂

ההרצאה חולקה ל-3 נושאים שונים ונפרדים אך יחדיו הם בונים תהליך עבודה שאני לפחות, מאמין בו מאוד.
נושאי ההרצאה: WP-CLI, Gulp, Bitbucket pipelines.

WP-CLI

אז מהו WP-CLI?
WP-CLI הוא ממשק לשורת הפקודה לפיתוח וניהול אתרי וורדפרס.
לאחר התקנת WP-CLI על המכונה שלכם, תוכלו לבצע פעולות כמו:

– הורדת קבצי המערכת של וורדפרס
– יצירת קובץ wp-config.php
– יצירת תבנית בת והפעלתה
– יצירת Custom Post Type

ועוד…

התקנת WP-CLI

משתמשי לינוקס ו-OS X יהנו מ-WP-CLI לאחר 3 פקודות בלבד:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

chmod +x wp-cli.phar 

sudo mv wp-cli.phar /usr/local/bin/wp

בחלונות זה רק מעט יותר מורכב:

1. הכנסו לאתר WP-CLI, הורידו את הקובץ wp-cli.phat ומקמו אותו בתיקייה חדשה בשם wp-cli בכונן C.
2. באותה תיקייה צרו קובץ batch הנקרא wp.bat והכניסו אליו את התוכן הבא:

@ECHO OFF 
php "c:/wp-cli/wp-cli.phar" %*

3. כעת, עלינו להגדיר לחלונות 3 משתני מערכת:
כנסו אל ה-Control Panel, שם לחצו על "System", ואז על "Advanced system settings".
לחצו על "Environment Variables". שם, תחת "System variables", לחצו על PATH ואז על "Edit".
כעת עליכם להוסיף את הנתיבים הבאים:
C:\wp-cli, C:\xampp\mysql\bin, C:\xampp\php

שימו לב לנתיבים, אני עובד עם XAMPP.

כעת, אם הכל תקין, תוכלו להריץ פקודות WP-CLI בטרמינל בתיקיית הפרויקט שלכם.
מספר דוגמאות:

הורדת ה-Core של וורדרפס:

wp core download

יצירת קובץ wp-config עם פרטי מסד הנתונים (אשר פתחנו מראש):

wp config create --dbname=mywebsite --dbuser=root --dbpass= --locale=en_US

התקנת אתר הוורדפרס שלנו:

wp core install --url=localhost/mywebsite --title=mywebsite --admin_user=admin --admin_password=abcd1234 --admin_email=example@example.com

שימו לב לפרטים שסיפקתי, כתובת האתר, כותרת, שם משתמש, מייל וסיסמא (כזו שלא כדאי להשתמש בה אף פעם).

התקנת תוספים והפעלתם לאחר ההתקנה:

wp plugin install wordpress-seo contact-form-7 --activate

לפקודות נוספות, כאלו שהיו והוצגו בהרצאה ואף מעבר לכך, בקרו כאן.

Gulp

אז מהו בעצם Gulp?
Gulp הוא "מריץ תהליכים".
הוא מאפשר לנו לקחת פעולות שאנו מבצעים בעבודה השוטפת שלנו ולהפוך אותם לאוטומטיים, פעולות כמו:
1. קומפילצייה של קבצי LESS/SASS לקבצי CSS.
2. מיניפיקציה של קבצי JS.
3. חיבור קבצי JS לקובץ אחד
ועוד..

התקנת Gulp

ההתקנה של Gulp מחולקת לשני חלקים:

התקנה גלובלית:
התקנה גלובלית משמעותה להתקין את Gulp על הסביבה שלנו, שהמכונה שלנו "תכיר" את Gulp.
להתקנה הגלובלית עלינו לבצע 2 צעדים:

1. הורדת והתקנת Node.js מהאתר הרשמי.
2. הרצת הפקודה הבאה בטרמינל:

npm install -g gulp

התקנה מקומית:
כעת, בתיקיית הפרויקט, נבצע את הצעדים הבאים על מנת להתקין את Gulp בפרויקט עצמו:

1.הריצו את הפקודה הבאה על מנת ליצור את הקובץ package.json:

npm init

2. הריצו את הפקודה שתיצור את התיקייה node_modules:

npm install --save-dev gulp

3. כעת, עליכם ליצור את הקובץ החשוב ביותר, זה שירכז את כל הפעולות ש-Gulp אמור לבצע בפרויקט שלנו, gulpfile.js.
בתור התחלה, עליו להכיל את הקוד הבא:

var gulp = require('gulp');

קוד זה "מייבא" את Gulp עצמו אל הפרויקט.

התקנת תוספים ב-Gulp

Gulp מאפשרת לנו להתקין תוספים רבים שיבצעו עבורנו משימות פיתוחיות רבות, כפי שהזכרתי לעיל.
התקנת תוסף מחולקת ל-2 חלקים:

1. הרצת הפקודה שתתקין את התוסיף, הפקודה הבאה למשל, תתקין תוסף בשם gulp-sass שתקמפל עבורנו קבצי SASS לקבצי CSS רגילים:

npm install --save-dev gulp-sass

כעת עלינו לכלול את את התוסף בקובץ gulpfile.js, בידיוק כמו שכללנו את gulp עצמו קודם לכן:

var sass = require('gulp-sass');

משימות ב-Gulp

התקנו תוסף ואף כללנו אותו בפרויקט אך ללא משימה, הוא לא יבצע כלום.
משימה בנויה ממספר פונקציות:

gulp.task – תיצור משימה חדשה
gulp.src – תקבל את נתיב קבצי המקור
gulp.dest – תקבל את נתיב קבצי היעד, לשם Gulp תעביר את הקבצים שהיא "יצרה".

בנוסף, "נחבר" בין פוקנציה עם ()pipe.

משימה לדוגמא – קומפיליציה של קבצי SCSS ל-CSS

var sass = require('gulp-sass');
gulp.task('styles', function() {
    gulp.src('assets/src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/dist/css'));
});

משימה זו נקראית "styles", היא תפנה אל assets/src/sass ותיקח משם את קבצי ה-scss שהיא מצאה, תעשה קומפילציה באמצעות התוסף הנקרא sass, ולאחר מכן תעביר אותו אל תיקיית קבצי היעד assets/dist/css.

על מנת להריץ את המשימה, נריץ את פקודת הטרמינל הבאה:

gulp styles

משימה נוספת, חיבור מספר קבצי JS לקובץ אחד וביצוע מיניפיקציה לקובץ זה:

ראשית, נתקין שני תוספים נחוצים:

gulp-conact – יחבר את כל קבצי ה-JS שלנו לקובץ אחד:

npm install --save-dev gulp-concat

gulp-uglify – יבצע minify לקובץ שנוצר קודם לכן:

npm install --save-dev gulp-uglify

נכלול את שני התוספים הללו:

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

וניצור משימה:

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('scripts', function() {
    gulp.src('assets/src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/dist/js'));
});

הרצת הפקודה הבאה תוציא את המשימה אל הפועל ונקבל קובץ בשם main.js המכיל את תוכן כל קבצי ה-JS שלנו ובנוסף, קובץ זה עבר מיניפיקציה:

gulp scripts

במידה ואנו מפתחים עבור אתר וורדפרס, לא נשכח לכלול את הקבצים שיצרנו (קובץ ה-css וקובץ ה-js בתבנית ה-child שלנו):

function custom_styles() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/assets/dist/css/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

function custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/assets/dist/js/main.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

מספר משימות במשימה אחת

על מנת לקרוא למספר משימות במשימה אחת, נוכל ליצור משימה חדשה ולספק לה מערך עם שמות המשימות:

gulp.task('run', [‘styles', 'scripts']);

נריץ את המשימה והיא תקרא לשניים האחרים:

gulp run

צפייה על קבצים – watchers

בהרצאה דיברתי גם על יצירת "watchers", תכונה של gulp המאפשרת "לצפות" על קבצים וברגע שמבוצע שינוי בקבצי המקור, המשימה הרלוונטית שהוגדרה תצא אל הפועל.
קוד קצר לדוגמא:

gulp.task('run', ['styles','scripts'], function() {
gulp.watch('assets/src/sass/*.scss', ['styles']);
gulp.watch('assets/src/js/*.js', ['scripts']);
});

כמו שניתן לראות, הוספתי למשימה "run" 2 שורות חשובות האחראיות על 2 watcherים.
האחד, יצפה על קבצי SCSS ובמידה ובוצע שינוי, יריץ את המשימה בשם "styles", השני יצפה על קבצי JS ובמידה וחל שינוי באחד הקבצים, יריץ את המשימה "scripts".
הסבר נוסף קיים כאן.

בנוסף, בהרצאה הסברתי גם על תוסף בשם browser-sync, תוסף נפלא שירענן עבורנו את האתר בעת ביצוע שינויים, עליו ניתן לקרוא כאן.

תהליך deployment אוטומטי עם גיט

הנושא שחתם את ההרצאה היא ביצוע deployment אוטומטי עם Git.
אני מאוד מקווה כי אתם כבר מכירים את Git ואת הצורך להשתמש בה, במידה ולא (באמת?) תוכלו לקרוא על Git במדריך שכתבתי: מדריך ל-Git – ניהול גרסאות קוד

כולנו מכירים את התהליך של ביצוע שינויים בפרויקט באופן מקומי על המחשב שלנו, דחיפת השינויים ל-Github או Bitbucket ולאחר מכן העלאת הקצבים ששינינו אל השרת שלנו באמצעות FTP.
תהליך זה ארוך ומייגע, ואכן, יש מספר אופציות לביצוע תהליך זה באופן אוטומטי:

Git hooks – דרך מדהימה אך מצריכה גישת SSH, שלא קיימת לכולם.
שימוש במערכות בתשלום כמו DeployBot – מערכת נפלאה אך היא לא חינמית (שזה בסדר, אבל לשלם כולם יודעים :])
שימוש ב-Bitbucket piplines – בואו נדבר על זה 🙂

Bitbucket pipelines

קודם כל, מה זה Bitbucket?

Bitbucket הוא אתר המאפשר ניהול מאגרים, בדומה ל-Github המפורסם.
נכון להיום, Bitbucket מאפשרת יצירת מאגרים פרטיים גם כמשתמש חינמי (כיום, עד ל-5 משתמשים).
בנוסף לכך, Bitbucket מציעה גם שירות מאוד מעניין הנקרא Bitbucket pipelines המאפשר לנו להריץ סקריפטים מסוג yml, וכך לדוגמא, לבצע deployment אוטומטי ברגע שביצענו push למאגר.
לאחר יצירת חשבון ומאגר באתר, עליכם לגשת לחלון הגדרות, שם לגשת אל הגדרות ה-Pipelines ולאפשר את השימוש בפיצ'ר זה.

לאחר מכן, עלינו לגשת אל חלון ה-Environment Variables ולהוסיף שם את שם המשתמש שם חשבון ה-FTP שלנו ואת הסיסמא.
קראו להם FTP_USER ו-FTP_PASS לדוגמא. אגב, רצוי לסמן את תיבת ה-secured למשתנה המכיל את הסיסמא.

כעת, עלינו לחזור אל חלון הגדרות ה-Pipelines וליצור סקריפט שיבצע את ה-deployment.
לחצו על הכפתור והכניסו לשם את הקוד הבא:

image: samueldebruyn/debian-git

pipelines:
  default:
    - step:
        script:
          - echo "Processing..."
  branches:
    master:
      - step:
          script:
          - apt-get update
          - apt-get -qq install git-ftp
          - git ftp init --user $FTP_USER --passwd $FTP_PASS ftp://domain.co.il/public_html

כמובן ששנו את נתיב ה-FTP לנתיב שלכם.
כעת, לחצו על "Commit file".

כעת, אם ה-pipeline הראשון בוצע בהצלחה וקיבלנו הודעה המודיעה על כך, נחזור אל עריכת הסריפט ונחליף את המילה "init" בשורה האחרונה ל-"push" מאחר ו-init אנו מבצעים פעם אחת בלבד.
נעשה commit פעם נוספת וזהו, אם גם pipeline זה בוצע בהצלחה, ברכות, מעכשיו, בכל push למאגר, השינויים אמורים לעלות אל השרת דרך פרוטוקול FTP.
כל "שידור" של pipeline כזה דורש "זמן אוויר", כיום לפחות, משתמש חינמי מקבל 50 דקות כאלו.
יש לציין כי אני לפחות, מגדיר deployment אוטומטי לשרת בדיקות בלבד (staging) ולא אל סביבת ה-production.
בנוסף, שימו לב כי מדובר בפרוטוקול FTP ולא SFTP, המאובטח פחות.

לסיכום

אז אלו היו הנושאים שעליהם דיברתי בהרחבה יחד עם הקרנת הדגמות מוקלטות בהרצאה.
יצירת תהליך עבודה נכון ומהיר תהפוך אותנו למפתחים טובים יותר ויעילים יותר.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)