Sử dụng Gulp trong Visual Studio

Trong bài viết này, mình sẽ hướng dẫn các bạn cách sử dụng cơ bản công cụ Gulp trong môi trường command line và trong Visual Studio. Mình tình cơ biết Gulp khi xem framework Simplcommerce

Gulp là gì?

Gulp là một công cụ giúp bạn tự động hóa nhiều task (nhiệm vụ) trong quá trình phát triển web.
Có rất nhiều tác vụ khi build 1 website: Minify js, css, copy file, xóa file,…

Cài đặt Gulp

Đầu tiên bạn cài đặt NodeJs. Sau đó mở cmd lên, và sử dụng lệnh sau:
npm install gulp –g

Các thành phần chính của Gulp

Để chạy được gulp cần một file gulpfile.js trong đó có chứa các thành phần chính là: gulp.task, gulp.src, gulp.dest, gulp.watch.
Định nghĩa 1 task

gulp.task('task-name', function() {
  // Stuff here
});

Các hàm trong Gulp là các hàm async, vì vậy bạn cần viết thêm 1 phương thức để lắng nghe sự kiện kết thúc. Bạn có thể tham khảo thêm tại: https://gulpjs.com/docs/en/getting-started/async-completion
Có 2 cách đơn giản nhất:
Trả về 1 stream

const { src, dest } = require('gulp');

function streamTask() {
  return src('*.js')
    .pipe(dest('output'));
}

exports.default = streamTask;

Trả về 1 promise

function promiseTask() {
  return Promise.resolve('the value is ignored');
}
exports.default = promiseTask;

Ví dụ:
VD1: Trong ví dụ này, bạn sẽ tạo và xuất ra câu Hello World trong cmd.
Trong cmd, bạn gõ lệnh:

npm init

Lệnh này sẽ giúp bạn tạo file package.json. Sau đó, bạn muốn sử dụng thư viện nào thì gõ lệnh:

npm install <tên thư viện> --save-dev

Bạn tạo file gulpfile.js với nội dung sau:

var gulp = require('gulp');

gulp.task('hello', function() {
  return new Promise(function(resolve, reject) {
      console.log('Hello World');
      resolve();
    });
});

Câu lệnh require nói với Node tìm kiếm trong thư mục node_modules package có tên gulp. Khi package được tìm thấy, chúng ta gán nội dung tới biến gulp.
Task name: hello
Để thực thi task, bạn mở cmd, rồi gõ

gulp hello

VD 2: Hiển thị các file trong thư mục
Bạn cài đặt package gulp-debug:

npm install gulp-debug

Mở file js và thêm vào nội dung sau:

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

gulp.task('dir', function() {
  return gulp.src('Modules/**/*')
  .pipe(debug());    
});

**/*: tìm tất cả các file trong thư mục Modules và các thư mục con của Modules
VD 3: Trong ví dụ này, bạn sẽ xài package gulp-clean để xóa file trong thư mục hiện tại và copy file từ folder khác sang thư mục hiện tại:

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

gulp.task('copy', function() {
  return gulp.src('Modules/**/*')
  .pipe(debug())
  .pipe(gulp.dest('release/'));    
});

gulp.task('clean', function(){
  return gulp.src('release/', {read: false})
    .pipe(clean({force: true}));
});

gulp.src: lấy tất cả đường dẫn file trong thư mục Module và các thu mục con
debug(): in ra tất các đường dẫn file sau khi đọc file bằng gulp.src
gulp.dest: bạn cũng cần chỉ ra đường dẫn đích mà bạn muốn gulp trả về file sau khi đã thực hiện gulp.task.
clean(): xóa tất cả các file trong thư mục release
(còn tiếp)