Hướng dẫn Gulp siêu đơn giản cho người mới bắt đầu

Ngày nay, sử dụng build tool là phần không thể thiếu trong quy trình phát triển web.

Gulp là một trong những build tool phổ biến nhất (cùng với Webpack).

Nhưng Gulp có độ dốc học tập nhất định.

Rào cản lớn nhất là tìm ra hàng trăm thành phần khác nhau liên quan đến nó.

Thêm vào đó, mọi thứ phải làm trên dòng lệnh (command line), điều này có thể đáng sợ nếu bạn chưa quen.

Hướng dẫn này sẽ đi qua cơ bản của npm (Node Package Manager) và cài đặt Gulp cho dự án front-end.

Sau khi hoàn thành, bạn sẽ tự tin hơn rất nhiều trong việc thiết lập workflow và sử dụng command line!

Gulp có gì đặc biệt?

Gulp giúp tiết kiệm thời gian lớn. Bằng Gulp, bạn để máy tính lo những việc lặp đi lặp lại nhàm chán:

• Biên dịch file Sass sang CSS,
• Gộp (concatenate) nhiều file JavaScript,
• Nén (minify) file CSS và JS,
• Và tự động chạy các task trên khi phát hiện file thay đổi.

Gulp còn làm được nhiều task phức tạp hơn, nhưng hướng dẫn này tập trung vào cơ bản.

Tóm tắt nhanh các bước

1. Cài Node.js và npm lên máy.
2. Cài Gulp và các package cần thiết cho dự án.
3. Cấu hình file gulpfile.js để chạy các task mong muốn.
4. Để máy tính làm việc thay bạn! 🙂

Đừng lo nếu chưa hiểu hết các thuật ngữ. Tôi sẽ giải thích từng bước một.

Bây giờ bắt đầu!

Thiết lập môi trường

Node.js

Để chạy Gulp, cần cài Node.js vào môi trường local.

Node.js được mô tả là "JavaScript runtime" – JavaScript chạy phía backend. Gulp chạy trên Node, nên hiển nhiên phải cài Node trước.

Tải từ trang chủ Node.js. Khi cài Node, npm cũng được cài theo.

Npm (Node Package Manager)

Npm là kho chứa liên tục cập nhật các plugin JavaScript (gọi là package), do developer toàn cầu viết. Gulp là một trong số đó (còn cần thêm vài package khác).

Điểm mạnh của npm: cho phép cài package trực tiếp từ command line. Không cần tải file thủ công từ website.

Cú pháp cơ bản cài package:

npm install [Tên Package]

Rất đơn giản, phải không?

Thư mục node_modules

Khi cài package npm, nó tạo thư mục node_modules chứa toàn bộ file package.

Nếu từng mở thư mục này, bạn sẽ thấy hàng loạt folder lồng nhau.

Tại sao? Vì package thường phụ thuộc vào package khác (dependencies) để chạy. Plugin này dùng chức năng package kia – không ai muốn mài lại bánh xe.

Khi cài plugin, nó cài thêm dependencies của nó vào node_modules của chính nó, và cứ thế lồng nhau.

Không cần lo lắng về node_modules lúc này – chỉ giải thích sơ lược thôi 🙂

Quản lý package với package.json

Tính năng hay của npm: nhớ chính xác package nào đã cài cho dự án.

Quan trọng khi phải cài lại toàn bộ, hoặc cho developer khác dễ dàng cài đặt project trên máy họ.

Cơ chế: npm dùng file package.json lưu danh sách package, version, và thông tin dự án (tên, tác giả, repo Git...).

Tạo package.json

Khởi tạo file bằng command line.

Di chuyển vào thư mục dự án, gõ:

npm init

npm sẽ hỏi thông tin dự án. Phần lớn bấm Enter dùng giá trị mặc định trong ngoặc.

Xong, npm sinh file package.json trong thư mục dự án. Mở trong editor sẽ thấy dạng như:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
  "repository": { "type": "git", "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git" },
  "keywords": [ "gulp" ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": { "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues" },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

Dự án của bạn sẽ có thông tin riêng. Lúc này không cần quá quan tâm các trường info – chủ yếu dùng cho package public.

Điều quan trọng: package.json sẽ chứa danh sách package cần cho Gulp.

Cài đặt package

Trước đó đã nói về npm install [Tên Package].

Lệnh này cài package vào node_modules và tự động lưu vào package.json làm dependency.

Cài Gulp:

npm install gulp

Có thể mất 1-2 phút. Có thể xuất hiện warning – bỏ qua trừ khi cài thất bại.

Mở package.json, cuối file sẽ thấy Gulp đã thêm vào dependencies:

"dependencies": { "gulp": "^3.9.1" }

Danh sách này sẽ mở rộng khi cài thêm package.

Các package khác cần cho Gulp

Ban đầu muốn Gulp chạy task compile SCSS/CSS và JS. Cần các package sau:

• gulp-sass – biên dịch Sass sang CSS
• gulp-cssnano – nén CSS
• gulp-concat – gộp nhiều file JS thành một
• gulp-uglify – nén JS

Cài lần lượt từng lệnh (chờ vài giây mỗi lệnh):

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Gulp-cli vs Gulp global

Trước đây, để chạy lệnh "gulp" từ command line, phải cài Gulp global: npm install --global gulp.

Nhưng một phiên bản Gulp global gây xung đột nếu nhiều project cần version khác nhau.

Khuyến nghị hiện nay: cài gulp-cli global thay vì Gulp.

Vẫn chạy được lệnh "gulp", nhưng mỗi project dùng version Gulp riêng.

npm install --global gulp-cli

Tham khảo thêm bài viết trên Treehouse.

Đã cài xong mọi package. Chuyển sang thiết lập file dự án!

Thiết lập cấu trúc file

Có nhiều cách cấu trúc file. Cách dưới đây phù hợp project cơ bản, "đúng" hay không tùy nhu cầu cụ thể.

Cách này giúp nắm vững chức năng cơ bản, sau đó tự tùy chỉnh.

Cây thư mục dự án:

• Root Project Folder
  • index.html
  • gulpfile.js
  • package.json
  • node_modules (folder)
  • app (folder)
    • script.js
    • style.scss
  • dist (folder)

package.json và node_modules đã giải thích. index.html là file website chính.

gulpfile.js – nơi cấu hình Gulp chạy task. Sẽ đi sâu sau.

Hai folder quan trọng cho workflow Gulp: app và dist.

Folder app và dist

Trong app: file JS cơ bản (script.js) và SCSS cơ bản (style.scss). Nơi bạn viết code JS và CSS.

dist chỉ lưu file JS, CSS đã compile sau khi Gulp xử lý. Không sửa file trong dist, chỉ sửa file app. Nhưng file trong dist mới được load trong index.html vì dùng file đã compile.

Cấu trúc file/folder có nhiều cách, quan trọng là hợp lý và giúp làm việc hiệu quả.

Giờ đến phần cốt lõi: cấu hình Gulp!

Tạo và cấu hình Gulpfile

Gulpfile chứa code nạp package đã cài và chạy các function. Code thực hiện 2 chức năng cơ bản:

1. Khởi tạo package đã cài làm module Node.
2. Tạo và chạy task Gulp.

Khởi tạo package

Để dùng tính năng npm package, cần export chúng làm module Node (do đó tên folder node_modules).

Đầu file Gulpfile, thêm module:

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

Bây giờ có thể dùng function/object của package trong script Gulpfile. Cũng dùng một số function built-in của Node.js.

Tạo task Gulp

Tạo task Gulp bằng code:

gulp.task('[Tên Function]', function(){
  // Làm việc ở đây
}

Cho phép chạy task bằng gulp [Tên Function] trên command line. Quan trọng vì có thể gọi function này từ task khác.

Cụ thể, xây dựng một số task Gulp khác nhau, tất cả sẽ chạy khi gõ gulp mặc định.

gulp.task('sass', function(){
  return gulp.src('app/style.scss')
    .pipe(sass())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

div { display: block; &.content { position: relative; } }
.red { color: red; }

[15:04:53] Starting 'sass'...
[15:04:53] Finished 'sass' after 121 ms

div{display:block}div.content{position:relative}.red{color:red}

gulp.src('app/*.js')

gulp.src(['app/script.js', 'app/script2.js'])

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

gulp.task('js', function(){
  return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

[14:38:31] Starting 'js'...
[14:38:31] Finished 'js' after 36 ms

gulp.watch('app/*.scss', ['sass']);

gulp.watch('app/js/**/*.js', ['js']);

gulp.task('watch', function(){
  gulp.watch('app/*.scss', ['sass']);
  gulp.watch('app/js/**/*.js', ['js']);
});

gulp.task('default', ['sass', 'js', 'watch']);

<link rel="stylesheet" href="dist/style.css">

<script src="dist/all.js"></script>