พบกันเร็วๆ นี้ครับ
DataTables – Data from Ajax, Edit in Place
index.html
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<div class="table">
<h2>'pd_profiles' table</h2>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="pd_profiles" style="width:95%;margin:0 auto" width="100%">
<thead><th title="First Name">first_name</th><th title="Last Name">last_name</th><th title="Email">email</th><th title="Status">status</th><th title="Role">role</th><th title="Registration date">date_reg</th></thead>
<tbody><tr><td colspan="6" class="dataTables_empty">Downloading data about the users from the server</td></tr></tbody>
<tfoot><th title="First Name">first_name</th><th title="Last Name">last_name</th><th title="Email">email</th><th title="Status">status</th><th title="Role">role</th><th title="Registration date">date_reg</th></tfoot>
</table>
<div style="clear:both"></div><br /><hr />
<button id="btnDeleteMemRow">Delete record</button>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.dataTables.editable.js"></script>
<script src="js/jquery.jeditable.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/main.js"></script>
Javascript
inc/main.js
$(function() {
var oMemTable = $('#pd_profiles').dataTable({
'bProcessing': true, 'bServerSide': true, 'sAjaxSource': 'service.php?action=getMembersAjx',
}).makeEditable({
sUpdateURL: 'service.php?action=updateMemberAjx',
'aoColumns': [
{
tooltip: 'First Name',
oValidationOptions : { rules:{ value: {minlength: 3 } },
messages: { value: {minlength: 'Min length - 3'} } }
},
{
tooltip: 'Last Name',
oValidationOptions : { rules:{ value: {minlength: 3 } },
messages: { value: {minlength: 'Min length - 3'} } }
},
{
tooltip: 'Email',
oValidationOptions : { rules:{ value: {minlength: 5 } },
messages: { value: {minlength: 'Min length - 5'} } }
},
{
tooltip: 'Member status',
type: 'select',
data: "{'passive':'passive','active':'active'}",
submit: 'Ok',
},
{
tooltip: 'Member role',
},
{
tooltip: 'date_reg',
oValidationOptions : { rules:{ value: {minlength: 3 } },
messages: { value: {minlength: 'Min length - 3'} } }
}
],
sDeleteURL: 'service.php?action=deleteMember',
sDeleteRowButtonId: 'btnDeleteMemRow',
});
});
service.php
if ($_GET) {
require_once('classes/CMySQL.php');
switch ($_GET['action']) {
case 'getMembersAjx':
getMembersAjx();
break;
case 'updateMemberAjx':
updateMemberAjx();
break;
case 'deleteMember':
deleteMember();
break;
}
exit;
}
function getMembersAjx() {
// SQL limit
$sLimit = '';
if (isset($_GET['iDisplayStart']) && $_GET['iDisplayLength'] != '-1') {
$sLimit = 'LIMIT ' . (int)$_GET['iDisplayStart'] . ', ' . (int)$_GET['iDisplayLength'];
}
// SQL order
$aColumns = array('first_name', 'last_name', 'email', 'status', 'role', 'date_reg');
$sOrder = '';
if (isset($_GET['iSortCol_0'])) {
$sOrder = 'ORDER BY ';
for ($i=0 ; $i<(int)$_GET['iSortingCols'] ; $i++) {
if ( $_GET[ 'bSortable_'.(int)$_GET['iSortCol_'.$i] ] == 'true' ) {
$sOrder .= '`'.$aColumns[ (int)$_GET['iSortCol_'.$i] ].'` '.
($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .', ';
}
}
$sOrder = substr_replace($sOrder, '', -2);
if ($sOrder == 'ORDER BY') {
$sOrder = '';
}
}
// SQL where
$sWhere = 'WHERE 1';
if (isset($_GET['sSearch']) && $_GET['sSearch'] != '') {
$sWhere = 'WHERE 1 AND (';
for ($i=0; $i<count($aColumns) ; $i++) {
if (isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == 'true') {
$sWhere .= '`' . $aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch'])."%' OR ";
}
}
$sWhere = substr_replace( $sWhere, '', -3 );
$sWhere .= ')';
}
$aMembers = $GLOBALS['MySQL']->getAll("SELECT * FROM `pd_profiles` {$sWhere} {$sOrder} {$sLimit}");
$iCnt = (int)$GLOBALS['MySQL']->getOne("SELECT COUNT(`id`) AS 'Cnt' FROM `pd_profiles` WHERE 1");
$output = array(
'sEcho' => intval($_GET['sEcho']),
'iTotalRecords' => count($aMembers),
'iTotalDisplayRecords' => $iCnt,
'aaData' => array()
);
foreach ($aMembers as $iID => $aInfo) {
$aItem = array(
$aInfo['first_name'], $aInfo['last_name'], $aInfo['email'], $aInfo['status'], $aInfo['role'], $aInfo['date_reg'], 'DT_RowId' => $aInfo['id']
);
$output['aaData'][] = $aItem;
}
echo json_encode($output);
}
function updateMemberAjx() {
$sVal = $GLOBALS['MySQL']->escape($_POST['value']);
$iId = (int)$_POST['id'];
if ($iId && $sVal !== FALSE) {
switch ($_POST['columnName']) {
case 'first_name':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `first_name`='{$sVal}' WHERE `id`='{$iId}'");
break;
case 'last_name':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `last_name`='{$sVal}' WHERE `id`='{$iId}'");
break;
case 'email':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `email`='{$sVal}' WHERE `id`='{$iId}'");
break;
case 'status':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `status`='{$sVal}' WHERE `id`='{$iId}'");
break;
case 'role':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `role`='{$sVal}' WHERE `id`='{$iId}'");
break;
case 'date_reg':
$GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `date_reg`='{$sVal}' WHERE `id`='{$iId}'");
break;
}
echo 'Successfully saved';
}
exit;
}
function deleteMember() {
$iId = (int)$_POST['id'];
if ($iId) {
$GLOBALS['MySQL']->res("DELETE FROM `pd_profiles` WHERE `id`='{$iId}'");
return;
}
echo 'Error';exit;
}
css/styles.css
.table {
margin: 50px auto;
width: 90%;
}
table.display tr.even.row_selected td {
background-color: #B0BED9;
}
table.display tr.odd.row_selected td {
background-color: #9FAFD1;
}
VIEW DEMO..............................
***************************************************************************
CSS3 Border Radius Property กล่องโค้งมนด้วย CSS3
CSS3 Border Radius Property คือ คุณสมบัติการกำหนดเส้นขอบแบบโค้งมนด้วย CSS3 ซึ่งจะช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างกล่องแบบโค้งมนได้อย่างง่ายดายจากกำหนดด้วยคุณสมบัติของ CSS3
ตัวอย่างโปรแกรม
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>#box_css3_raduis { border:solid 1px green; width:150px; height:150px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background:#009900;}</style><div id='box_css3_raduis'></div> |
ข้อควรระวัง
CSS3 Border Radius Property สนับสนุนบน IE9+, Firefox 4+, Chrome, Safari 5+, และ Opera ครับ
Enjoycss - เครื่องมือออนไลน์ช่วยเขียนโค้ด CSS3 ง่าย ๆ
enjoycss เป็นเวปสำหรับ generator css3 ที่เราต้องการ เพียงแค่คลิกๆ แล้วก็ get the code
http://enjoycss.com/
Gulp.js คืออะไร ?
Gulp.js คืออะไร ? + สอนวิธีใช้
ในการทำเว็บไซต์นั้น มักจะมีงานจุกจิกๆ
มากมายที่เราทำกันจนชิน จนบางทีเราอาจลืมคิดไปเลยว่าเราเสียเวลาไปกับมันมากขนาดไหน
ไม่ว่าจะเป็นการปรับคุณภาพของรูป การบีบอัดไฟล์ html, css และ
js หรือแม้กระทั่งการรีเฟรชหน้าเว็บหลังจากที่เราได้แก้ไขโค้ดบางอย่างไป
บทความนี้เราเลยจะมาพูดถึง tool ที่จะมาทำให้ปัญหาเหล่านี้หมดไปอย่าง gulp.js
ลองมาดูกันว่ามันจะช่วยเราได้มากขนาดไหน
gulp.js คืออะไร
gulp.js เป็น tool ที่เหมือนเป็น
“คนใช้” ที่จะช่วยทำ task ต่างๆ
แทนเรา แต่เดิมเราอาจต้องทำ task เหล่านั้นเอง แต่ถ้าเราใช้ gulp.js
เราก็แค่บอก gulp.js ว่า task ทั้งหมดที่จะต้องทำมีอะไรบ้าง
ที่เหลือก็แค่สั่งให้ gulp.js เริ่มทำงานเท่านั้นเอง
แล้วเราสั่งให้ gulp.js ทำอะไรได้บ้าง
?
task ต่างๆ ที่เราจะให้ gulp.js ช่วยทำนั้น
เราจะต้องเขียนให้อยู่ในรูปของ JavaScript แต่ไม่ต้องกังวลว่าถ้าเราไม่เก่ง JavaScript
แล้วจะทำไม่ได้ เพราะว่ามีผู้ใจดีมากมายที่เขียน task ต่างๆ
มาให้เราเอาไปใช้ฟรีๆ ซึ่ง task ยอดนิยมที่คนมักขอให้ gulp.js ช่วยทำมีดังนี้
Compile
คอมไพล์ไฟล์ Sass/Compass หรือ
LESS ให้กลายเป็นไฟล์ CSS
Minify
ย่อไฟล์ HTML, CSS และ
JS รวมไปถึงรูปต่างๆ ให้มีขนาดเล็กลง
Combine
รวมไฟล์ CSS หรือ
JS หลายๆ ไฟล์ให้กลายเป็นไฟล์เดียวกัน
Refresh
รีเฟรช Web Browser
ลองคิดดูว่าถ้าเราไม่ต้องมาทำ task เหล่านี้เองแล้ว
เราจะทำเว็บได้เร็วขึ้นขนาดไหน ?
ลองใช้ gulp.js
เมื่อเราพอจะเข้าใจภาพรวมของ gulp.js แล้ว
เราก็มาลองใช้มันดูเลยดีกว่า (เนื่องจาก gulp.js นั้นเป็น
package ของ Node.js เราจึงควรมีพื้นฐานเกี่ยวกับ
Node.js มาบ้าง)
1. ติดตั้ง gulp.js
อย่างแรกเลยให้เราติดตั้ง gulp.js ก่อน
โดยการติดตั้งนั้น เราจะต้องทำอยู่ 2 ที่ด้วยกัน ดังนี้
1.1 Global
การติดตั้งที่ global นี้
เป็นการทำให้เราสามารถใช้คำสั่งของ gulp.js ใน command-line
ได้ โดยเราจะทำเพียงแค่ครั้งเดียวเท่านั้น (งานหน้าไม่ต้องติดตั้งแบบนี้แล้ว)
ให้เราพิมพ์คำสั่งด้านล่างนี้
npm install -g gulp
แต่ถ้าใครใช้ Mac อยู่ก็ให้ใส่
sudo เข้าไปข้างหน้าด้วย แบบนี้
sudo npm install -g gulp
เพียงเท่านี้ เราก็จะสามารถใช้คำสั่งของ gulp.js
ใน command-line ได้แล้ว
1.2 Local
ต่อมาเราจะต้องติดตั้ง gulp.js แบบ
local ด้วย ซึ่งก็คือการติดตั้ง gulp.js เอาไว้ที่
folder งานของเรานั่นเอง ให้เรา cd เข้าไปที่
folder งานของเราก่อน
cd myProject
จากนั้นก็ให้เรารันคำสั่งตามด้านล่างนี้
npm install --save-dev gulp
หมายเหตุ: หากเราจะใช้ gulp.js กับงานไหน
เราก็จะต้องติดตั้ง gulp.js แบบ local เอาไว้ที่
folder งานนั้นๆ เสมอ
2. กำหนด Task ต่างๆ
ลงในไฟล์ gulpfile.js
ต่อมาเราจะต้องระบุว่าเราต้องการจะให้ gulp.js
ช่วยทำอะไรบ้าง ให้เราสร้างไฟล์ที่มีชื่อว่า gulpfile.js ขึ้นมา
แล้วใส่ task ต่างๆ ลงไปในไฟล์ โดยใช้รูปแบบนี้
// โหลด package "gulp" มาใช้
(บรรทัดนี้ต้องใส่เสมอ)
var gulp = require('gulp');
// สร้าง task ชื่อว่า
"taskName" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('taskName', function() {
// ระบุว่า
task นี้ทำอะไร
});
เพื่อเป็นการทดสอบว่า gulp.js ทำงานได้แล้ว
เราอาจสร้าง task ง่ายๆ ขึ้นมา ลองดู task ต่อไปนี้
var gulp = require('gulp');
// สร้าง task ที่มีชื่อว่า
"siamhtml"
gulp.task('siamhtml', function() {
// ให้แสดงข้อความ
"SiamHTML" ออกมาทาง console
console.log('SiamHTML');
});
3. รัน gulp.js
เมื่อเราสร้าง task ง่ายๆ
เรียบร้อยแล้ว สุดท้ายก็มาถึงการสั่งให้ task นั้นทำงาน
ให้เราใช้คำสั่งในรูปแบบนี้
gulp [ชื่อ task ที่จะสั่งให้ทำงาน]
เนื่องจากเราได้สร้าง task ชื่อ
“siamhtml” เอาไว้แล้ว เราก็เลยจะสั่ง gulp.js ให้ลองทำ
task นี้ดู
gulp siamhtml
เมื่อลองรันดู เราก็จะเห็นข้อความ “SiamHTML”
ขึ้นมาจริงๆ เราใช้ gulp.js เป็นแล้ว !
ลองใช้ Plugin ของ
gulp.js
แน่นอนว่าในการใช้งานจริง เราคงไม่มานั่งเขียน task
ยากๆ ขึ้นมาใช้เอง แต่เราจะโหลด plugin ดีๆ
ของ gulp.js มาใช้เลย ลองมาดู plugin ที่น่าสนใจกันดีกว่า
Sass (gulp-ruby-sass)
คอมไพล์ Sass/Compass ให้เป็น
CSS
Minify HTML (gulp-minify-html)
ย่อไฟล์ HTML ให้เล็กลง
Minify CSS (gulp-minify-css)
ย่อไฟล์ CSS ให้เล็กลง
Uglify (gulp-uglify)
ย่อไฟล์ JS ให้เล็กลง
Minify รูป (gulp-imagemin)
ย่อไฟล์รูปให้มีขนาดเล็กลง
Concat (gulp-concat)
รวมไฟล์ JS หลายๆ
ไฟล์ ให้กลายเป็นไฟล์เดียว
Refresh (browser-sync)
รีเฟรช Web Browser
เมื่อเลือก plugin ที่ถูกใจได้แล้ว
ก็ให้ลองติดตั้งดู สำหรับวิธีติดตั้ง plugin ของ
gulp.js นั้นก็ไม่ยากเลย เพราะจะเหมือนกับการติดตั้ง package
ของ Node.js ทั่วไป ซึ่งมีบอกไว้ในหน้า plugin
นั้นๆ อยู่แล้ว
ลองติดตั้ง Plugin สำหรับคอมไพล์
Sass
สมมติว่าเราจะติดตั้ง plugin
gulp-ruby-sass ก็ให้เราพิมพ์คำสั่งนี้
(มีบอกในหน้าเว็บหลักของ plugin)
npm install --save-dev gulp-ruby-sass
จากนั้น เราก็ต้องเข้าไปเพิ่ม task ใน gulpfile.js
(มีบอกในหน้าเว็บหลักของ plugin)
// โหลด package "gulp" มาใช้
(บรรทัดนี้ต้องใส่เสมอ)
var gulp = require('gulp');
// โหลด package
"gulp-ruby-sass" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin
เสริม)
var sass = require('gulp-ruby-sass');
// สร้าง task ชื่อว่า
"sass" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('sass', function () {
// ให้คอมไพล์
.scss ทุกไฟล์ที่อยู่ในโฟลเดอร์ scss
return
gulp.src(['scss/**/*.scss'])
.pipe(sass({
compass:
true, // ใช้ Compass
style:
'compressed', // เลือก output แบบ
compressed
}))
.on('error',
function (err) {
console.log(err.message);
})
.pipe(gulp.dest('css')) // เก็บไฟล์ css ไว้ที่โฟลเดอร์
css
});
จากนี้ไป เวลาเราจะคอมไพล์ไฟล์ Sass ให้เป็นไฟล์
CSS เราก็แค่พิมพ์คำสั่งนี้
gulp sass
กำหนด Default Task ให้
gulp.js
ในอนาคต หากเรามี task จำนวนมาก
แล้วเราอยากสั่งให้ทำหลายๆ task เลยในทีเดียว เราก็อาจกำหนด task
เหล่านั้นให้ทำพร้อมกับ default task ไปเลยก็ได้
แบบนี้
// สร้าง default task ขึ้นมา
พร้อมกับระบุ task อื่นๆ ที่อยากให้ทำพร้อมกับ default
task
gulp.task('default', ['taskName1', 'taskName2',
'taskName3'], function() {
// ระบุว่า
default task ทำอะไร (ไม่ต้องใส่ก็ได้
เพราะเราต้องการจะให้ทำ taskName1, taskName2, taskName3)
});
แต่ในตอนนี้เรามีแค่ task “sass” เพียง
task เดียว หากเราจะให้ task นี้
ทำพร้อมกับ default task ไปเลย เราก็จะเขียนแบบนี้
// เพิ่ม sass ให้ทำพร้อมกับ
default task
gulp.task('default', ['sass'], function() {
// ระบุว่า
default task ทำอะไร (เว้นไว้ก่อน)
});
จากนี้ไป เวลาเราจะสั่งให้ task “sass” ทำงาน
เราก็สามารถพิมพ์สั้นๆ แบบนี้ได้เลย
gulp
หากลองดูที่ console เราก็จะเห็นว่า
gulp.js นั้นเริ่มทำ task “sass” ก่อน
แล้วตามด้วย task “default” ซึ่งในตอนนี้เป็นแค่ task เปล่าๆ
รู้จักกับ Watch ของ
gulp.js
บางคนอาจจะสงสัยว่า gulp.js จะมีประโยชน์อะไร
ในเมื่อเราก็ต้องมานั่งพิมพ์คำสั่งเพื่อบอกให้มันทำงานอยู่ดี
ให้มันรู้เองเลยได้มั้ยว่ามันควรจะทำตอนไหน ? คำตอบคือสามารถทำได้
เพราะ gulp.js มาพร้อมกับความสามารถในการเฝ้าดูการเปลี่ยนแปลงของไฟล์ต่างๆ
(Watch) นั่นหมายความว่าเราสามารถสั่งให้ gulp.js
ทำงานเมื่อตรวจพบว่ามีการแก้ไขไฟล์ได้นั่นเอง
สมมติว่าเราอยากจะให้ gulp.js ทำ task
“sass” ทุกครั้งที่มีการแก้ไขไฟล์ scss เลย
ก็ให้เราก็เพิ่มโค้ด watch ไปที่ default task แบบนี้
gulp.task('default', ['sass'], function() {
// เมื่อไฟล์
scss มีการเปลี่ยนแปลง ก็จะสั่งให้ task
"sass" ทำงาน
gulp.watch("scss/**/*.scss", ['sass']);
});
จากนั้นก็สั่งให้ default task ทำงานเหมือนเดิม
gulp
สิ่งที่เกิดขึ้นก็คือ task “sass” จะเริ่มทำงานก่อน
โดยการคอมไพล์ไฟล์ scss ทั้งหมดในขณะนั้นให้เป็น css เมื่อคอมไพล์เสร็จแล้ว
task “default” ก็จะเริ่มทำงาน
โดยการเฝ้าดูอย่างต่อเนื่องว่ามีไฟล์ scss อันไหนเปลี่ยนแปลงบ้าง
ถ้ามีก็จะสั่งให้ task “sass” ทำงานทันที เพื่อคอมไพล์ไฟล์ scss
นั้นๆ ให้เป็นไฟล์ css จากนี้ไป เวลาเราจะแก้ไฟล์ scss
เราก็ไม่ต้องมาคอมไพล์ให้เป็น css เองอีกต่อไปแล้ว
หมายเหตุ: watch ของ
gulp.js นั้น เป็น process ต่อเนื่อง
คือหลังจากที่เราสั่งให้มันทำงานแล้ว มันก็จะไม่หยุด watch จนกว่าเราจะยกเลิกเองด้วยการกดปุ่ม
Ctrl + c หรือ control + c
เสริมความสามารถด้วย BrowserSync
ถึงแม้ว่าเราไม่ต้องมาคอมไพล์ไฟล์ให้เป็น css
เองแล้ว แต่เราก็ยังต้องมากดปุ่มรีเฟรช web browser เองอยู่ดี
ลองนึกดูว่าเวลาเราทำ responsive web เราก็จะต้อง test กับ
device มากมาย การต้องมารีเฟรชทุกๆ device ทุกครั้งที่มีการแก้โค้ดก็คงไม่ค่อยสะดวกเท่าไรนัก
เพื่อให้การทำเว็บเป็นไปอย่างราบรื่นมากขึ้น
ให้เราติดตั้ง plugin ที่มีชื่อว่า “BrowserSync” เพิ่มเข้ามาอีกตัว
npm install browser-sync gulp --save-dev
ความสามารถของ BrowserSync ก็คือ
มันจะสามารถสั่งให้รีเฟรช web browser ทั้งหมดที่เปิดหน้าเว็บที่ระบุไว้ได้
ไม่ว่าจะอยู่ใน device ไหนก็ตาม แค่พูดอาจยังไม่ค่อยเห็นภาพ
เรามาลองใช้กันเลยดีกว่า ให้เราเข้าไปเพิ่ม task ต่อไปนี้
ใน gulpfile.js (มีบอกในหน้าเว็บหลักของ plugin)
// โหลด package "browser-sync" มาใช้
(บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)
var browserSync = require('browser-sync');
// สร้าง task ชื่อว่า
"browser-sync" ขึ้นมา พร้อมกับระบุงานที่จะให้ task
นี้ทำ
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir:
"./"
}
});
});
สุดท้ายก็ให้เรากำหนดให้ task
“browser-sync” ทำพร้อมกับ default task ไปเลย
// เพิ่ม task "browser-sync" ให้ทำพร้อม
default task
gulp.task('default', ['sass', 'browser-sync'], function() {
// เมื่อไฟล์
html หรือ css มีการเปลี่ยนแปลง
ก็ให้รีเฟรช web browser
gulp.watch(['**/*.html'], browserSync.reload);
gulp.watch(['css/**/*.css'], browserSync.reload);
// เมื่อไฟล์
scss มีการเปลี่ยนแปลง ก็ให้ทำ task
"sass"
gulp.watch("scss/**/*.scss", ['sass']);
});
จากโค้ดด้านบน จะเห็นว่าเราได้ watch ไฟล์
html และ css เพิ่มด้วย
เพราะเราต้องการจะให้ BrowserSync ช่วยรีเฟรช web browser เมื่อไฟล์เหล่านี้มีการเปลี่ยนแปลงนั่นเอง
(ด้วยคำสั่ง browserSync.reload)
เมื่อทุกอย่างพร้อมแล้ว ก็สั่งให้ default
task ทำงานเหมือนเดิม
gulp
เมื่อสั่งให้ gulp.js เริ่มทำงาน
สิ่งที่ต่างไปจากครั้งก่อนๆ ก็คือ default web browser ของเราจะเปิดหน้าเว็บที่เราทำอยู่ขึ้นมาโดยอัตโนมัติ
ที่เป็นเช่นนี้ก็เพราะผลจาก task “browser-sync” นั่นเอง
จากนั้นให้เราลองแก้ไขโค้ด html, css หรือ
scss ดู เราก็จะพบว่าหน้าเว็บนั้นอัพเดทตามในทันที
โดยที่เราไม่ต้องทำอะไรเลย
หากเราสังเกตที่ URL ก็จะพบว่าเป็น
URL ที่ task “browser-sync” สร้างมาให้โดยเฉพาะ
ตัวอย่างเช่น http://localhost:3000/ เป็นต้น ให้เราใช้ URL นี้ในการ
test เสมอ เพราะมิฉะนั้น
เราจะไม่ได้ความสามารถในการรีเฟรชของ BrowserSync เลย
(แต่ถ้าจะ test กับ device อื่นๆ
ก็ให้ใส่เป็น IP Address ตามปกติ แต่ขอให้ระบุ Port เดียวกันกับที่
BrowserSync กำหนดมาให้ เช่น http://192.168.1.xxx:3000
เป็นต้น)
บทสรุปการใช้ gulp.js
จะเห็นว่า gulp.js ช่วยให้เราเอาเวลาไปโฟกัสที่การเขียนโค้ดมากขึ้น
เพราะว่างานอื่นๆ gulp.js จะทำแทนเราทั้งหมด และหากใครมี 2
จอ การใช้ gulp.js ก็จะยิ่งมีประโยชน์มากขึ้นไปอีก
เนื่องจากเราสามารถเขียนโค้ดจอนึง แล้วดูพรีวิวอีกจอนึงได้ทันที จริงๆ แล้ว gulp.js
ยังสามารถทำอะไรได้มากกว่านี้อีก ขึ้นอยู่กับเราแล้วว่าจะสามารถนำ plugin
ต่างๆ มาประยุกต์ใช้ให้เหมาะกับงานได้มากน้อยแค่ไหน ?
สมัครสมาชิก:
บทความ (Atom)