ການໃຊ້ງານ gulp.js

https://medium.com/devux/minifying-your-css-js-html-files-using-gulp-2113d7fcbd16

ເບື່ອບໍທີ່ຕ້ອງມານັງຈັດການເລື່ອງຈຸກຈິກໃນການພັດທະນາ web application ຕົວຢ່າງເຊັ່ນການບີບອັດ file css,js,htmlໃຫ້ມີຂະຫນາດນ້ອຍລົງເພື່ອນຳໄປໃຊ້ເປັນ product ນອກຈາກນັ້ນກໍ
ຍັງມີເລື່ອງການ refresh web browser ໃນຂະນະທີ່ເຣົາແປງ file
js,html,css ເຖິງວ່າ editor ບາງອັນກໍມີໃຫ້ໃຊ້ກໍຕາມ.ແລະໃນຍຸກບັນ
ການພັດທະນາເວັບນັ້ນບາງຄົນກໍຂຽນ sass ໃຊ້ javascript ແບບ commonjs,AMU ເວລາຈະນຳມາໃຊ້ກໍຕ້ອງມາ run command line
ເພື່ອ compile ມັນເປັນ css ແລະ ຣູບແບບທີ່ web browser ສາມາດ
ປະມວນຜົນໄດ້ ເຊິ່ງມັນຄົນນ້າລຳຄານໂຄດເລີຍ ສະນັ້ນເຣົາຕ້ອງຫາຕົວຊ່ວຍ
ນັ້ນກໍຄື gulp.js ທີ່ເຣົາຈະເວົ້າເຖິງ ນອກຈາກຕົວນີ້ແລ້ວຍັງມີອີກຄື grunt.js ແຕ່ບົດຄວາມນີ້ຈະເວົ້າສະເພາະ gulp.js ທົ່ານັ້ນ.

ເລີມໃຊ້ງານ gulp.js

ກ່ອນອື່ນເຣົາຕ້ອງຕິດຕັ້ງ cli ຂອງ gulp ເສຍກ່ອນເພື່ອໃຫ້ເຣົາສາມາດ run
gulp ໃນ command line ທົ່ວໆໄປໄດ້ໂດຍໃຊ້ ຄຳສັ່ງ

$ npm install -g gulp-cli

ຈາກນັ້ນເຣົາຕ້ອງຕິດຕັ້ງລົງ local project ຂອງເຣົາດ່ວຍຄຳສັງ

$ npm install --save-dev gulp

ເປັນວ່າຕ້ອນນີ້ເຣົາພ້ອມໃຊ້ງານ gulp.js ແລ້ວ.

ທົດລອງໃຊ້ງານ gulp.js

ຫລັງຈາກຕິດຕັ້ງ gulp.js ແລ້ວກໍໃຫ້ສ້າງ gulpfile.js ຂຶ້ນມາໃນ
root project ຂອງເຣົາ.

ຢູ່ພາຍໃນ fileເຮົາຕ້ອງມີການເພີມtaskຕ່າງໆທີ່ເຮົາຈະສັ່ງໃຫ້ມັນເຮັດວຽກ
ແທນເຮົາຕົວຢ່າງເຊັ່ນ ຜູ້ຂຽນຕ້ອງການຈະ ບີບອັດ javascript file ໃຫ້ມັນນ້ອຍລົງແລະ copy ໄປໄວ້ທີ່ main folder ໂຄງສ້າງຂອງ project ແມ່ນຕາມຣູບຂ້າງເທິງນັ້ນ ເຮົາຕ້ອງຂຽນ task ຂຶ້ນມາເພຶ່ອເປັນໂຕບອກໃຫ້ gulp ຣູ້ວ້ຽກທີ່ຈະເຣັດ ເຊິ່ງ task ກໍຄືການສ້າງວ້ຽກຂຶ້ນມາແລ້ວຂຽນບອກວ່າໃນວຽກນັ້ນໃຫ້ gulp ເຣັດຫຍັງ
ແດ່ເຊິ່ງ ຜູ້ຂ້ຽນສັ່ງໃຫ້ມັນ minify file js ທີ່ຢູ່ໃນ folder db
ແລະຂຽນໄດ້ດັ່ງນີ້ດັ່ງນີ້.

var gulp=require('gulp');
var minijs=require('gulp-uglifyjs');
gulp.task('minijs', function () {
    return gulp.src('db/*.js')
        .pipe(minijs())
        .pipe(gulp.dest('main'));
});

ຈາກນັ້ນກໍ່ສັ່ງ run task minijs ດ່ວຍຄຳສັ່ງ

$ gulp minijs

ເຮົາກໍ່ຈະໄດ້ index.js ຢູ່ທີ່ folder main ແລະເປັນ file ທີ່ຖືກບີບອັດແລ້ວ
ບາງຄົນອາດສັງເກດເຫັນວ່າມີ third-library ເຂົ້າມາຊ່ວຍນັ້ນກໍ່ຄື
ພະເອກຂອງງານນີ້ເລີຍ ເພາະຖ້າມີແຕ່ gulp.js ໂດດໆມັນກໍ່ບໍ່ມີຫຍັງພິເສດ
ເລີຍເຊິ່ງໃນທີ່ນີ້ third-library ທີ່ໃຊ້ແມ່ນ libraryທີ່ໃຊ້ບີບອັດ file js ໃຫ້ນ້ອຍລົງນັ້ນກໍ່ຄື:

gulp-uglifyjs

ນອກນີ້ຍັງມີ third-library ອີກຫຼາຍໆຢ່າງທີ່ມີປະໂຫຍດກັບເຮົາ ຕົວຢ່າງເຊັ່ນ.

• gulp-git ທີ່ໃຊ້ຈັດການເລື່ອງຂອງ VCS git
• gulp-htmlmin ເປັນໂຕທີ່ໃຊ້ minify html file
• gulp-clean-css ເປັນຕົວທີ່ໃຊ້ minify css ແລະ ທຳຄວາມສະອາດມັນ ^^
• gulp-refresh ເປັນໂຕທີ່ໃຊ້ refresh browser ໃຫ້ເຮົາ

ນອກນັ້ນຍັງມີອີກຫຼາຍໆ library ທີ່ຫນ້າສົນໃຊ້ສາມາດເຂົາໄປຕາມຫາມັນໄດ້ທີ່
ເວັບຫຼັກຂອງມັນໄດ້ເລີຍ ແລະວິທີໃຊ້
ກໍ່ມີບອກໃນ document ຂອງແຕ່ລະ library.

ນອກຈາກນີ້ແລ້ວ ຖ້າຫາກເຮົາຍາກ run task ຕ່າງໆພ້ອມໆກັນກໍ່ສາມາດໃຊ້
task ແບບ default ຕົວຢ່າງເຊັ່ນ:

gulp.task('default',['miniIndex','minidbjs','miniReadfilejson','minifacebookconf'], function () {
    return gulp.src('*.json')
        .pipe(gulp.dest('main'));
});

ຈາກນັ້ນກໍ່ run ມັນໄດ້ເລີຍ ດ່ວຍຄຳສັງສັ້ນໆ gulp ເປັນອັນຈົບພິທີການ
ຖ້າມີຂໍ້ຜິດພາດກໍ່ອ່ານໆເບິ່ງແລະແກ້ໄຂຕາມນັ້ນ (ບໍ່ໄດ້ຊ່ວຍຫຍັງເລີຍ).

API gulp ແບບຫຍໍ້ໆ

• gulp.src(globs[, options])

ເປັນ method ທີ່ໃຊ້ອ້າງເຖິງ file ທີ່ເຮົາຈະນຳມາ process ຢ່າງໃດຢ່າງຫນຶ່ງ
ເຊັ່ນ ນຳມາ minify method ຈະຄຶນຄ່າເປັນ stream ເຮົາສາມາດໃຊ້ pipe
ເພື່ອສົ່ງຕໍ່ stream ນັ້ນໄປອີກ process ອື່ນໄດ້.

globs ສາມາດເປັນໄດ້ທັງ string ແລະ array ເຊັ່ນ

gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js'])

• gulp.dest(path[, options])

ເປັນ method ທີ່ສັ່ງໃຫ້ gulp ຍ້າຍ file ໄປໄວ້ບ່ອນທີ່ເຮົາຕ້ອງຫານຕົວຢ່າງ

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

• gulp.task(name [, deps, fn])

ເປັນ method ໃຊ້ສ້າງວຽກໃຫ້ gulp ເຮັດ (ເວົ້າແບບບ້ານໆ).
name ເປັນຊື່ຂອງວຽກນັ້ນໆ deps ເປັນ array ທີ່ໃຊ້ບອກ gulp ວ່າ
ຕ້ອງເຮັດ task ໃດແລ້ວກ່ອນຈຶ່ງມາເຮັດ task ນີ້ fn ເປັນ callback ທີ່
ໃຊ້ return stream ອອກມາຕົວຢ່າງເຊັ່ນ

gulp.task('buildStuff', function() {
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));
  return stream;
  });

task ນັ້ນຈະມີ task ທີ່ເປັນ default ຄືເຮົາບໍ່ຕ້ອງລະບຸຊື່ task ພຽງແຕ່
run gulp ເປັນກໍ່ໄປເຮັດ default task ເລີຍ.

• gulp.watch(glob[, opts, cb])

ເປັນ method ທີ່ໃຊ້ເຟົ້າເບິ່ງການປ່ຽນແປງຂອງ file ຖ້າມີການປ່ຽນແປງເຮົາກໍ່ສາມາດສັງໃຫ້ run task ໃດຫນຶ່ງເຊັ່ນ task ທີ່ໃຊ້ minify css,html,js
ຕົວຢ່າງເຊັ່ນ:

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

ລາຍລະອຽດເລຶ່ອງ API ແມ່ນສາມາດເບິ່ງເພີມເຕີມໄດ້ທີ່ API gulp.js

ສະຫຼຸບ

ການໃຊ້ gulp.js ຫຼື grunt.js ກໍ່ເປັນຜົນດີຕໍ່ເຮົາຫຼາຍຢ່າງ ແລະ ມັນເຮັດໃຫ້ເຮົາພັດທະນາເວັບເປັນ production ໄດ້ໄວຂຶ້ນ ໄປຮຽນໃຊ້ໆກັນໄວ້ມັນຕ້ອງມີປະໂຫຍດຫຼາຍຕໍ່ຊີວິດ web developer ແນ່ນອນ ຈະບອກໃຫ້ (^^).