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

Ngày nay, việc sử dụng công cụ xây dựng là một phần không thể thiếu trong quy trình phát triển web của bạn.

Gulp là một trong những công cụ xây dựng phổ biến nhất hiện nay (cùng với Webpack).

Nhưng có một đường cong học tập nhất định để học Gulp.

Một trong những trở ngại lớn nhất là tìm ra hàng trăm phần khác nhau có liên quan đến nó.

Và trên hết, bạn phải thực hiện mọi thứ trên dòng lệnh, điều này có thể cực kỳ đáng sợ nếu bạn chưa làm việc nhiều với nó.

Hướng dẫn này sẽ hướng dẫn bạn những kiến thức cơ bản về npm (Node Package Manager) và thiết lập Gulp cho các dự án front-end của bạn.

Sau khi hoàn tất, bạn sẽ cảm thấy tự tin hơn khi thiết lập quy trình làm việc của mình và sử dụng dòng lệnh!

Vậy vấn đề lớn với Gulp là gì?

Gulp là một công cụ tiết kiệm thời gian rất lớn. Bằng cách sử dụng Gulp, bạn có thể cho phép máy tính của mình xử lý các tác vụ tẻ nhạt, chẳng hạn như:

Biên dịch các tệp Sass sang CSS,
Nối (kết hợp) nhiều tệp JavaScript,
Giảm thiểu (nén) các tệp CSS và JS của bạn,
Và tự động chạy các tác vụ trên khi phát hiện thấy thay đổi tệp.

Gulp có thể thực hiện nhiều nhiệm vụ phức tạp hơn những nhiệm vụ mà tôi đã đề cập ở trên. Tuy nhiên, hướng dẫn này sẽ chỉ tập trung vào những điều cơ bản về Gulp và cách thức hoạt động của nó.

Phác thảo nhanh những gì chúng tôi sẽ làm

Dưới đây là các bước mà hướng dẫn này sẽ thực hiện:

Cài đặt Node.js và npm vào máy tính của bạn.
Cài đặt Gulp và các gói khác cần thiết cho dự án của bạn.
Định cấu hình tệp gulpfile.js của bạn để chạy các tác vụ bạn muốn.
Hãy để máy tính của bạn làm thay công việc của bạn! 🙂

Đừng lo lắng nếu bạn không hoàn toàn hiểu tất cả các thuật ngữ ở trên. Tôi sẽ giải thích mọi thứ từng bước một.

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

Thiết lập môi trường của bạn

Node.js

Để khởi động và chạy Gulp trên máy tính của mình, bạn cần cài đặt Node.js vào môi trường cục bộ của mình.

Node.js được tự mô tả là “JavaScript runtime”, được coi là JavaScript back-end. Gulp chạy bằng Node, vì vậy bạn cần phải cài đặt Node trước khi bắt đầu.

Bạn có thể tải xuống từ trang web Node.js. Khi bạn cài đặt Node, nó cũng cài đặt npm vào máy tính của bạn.

Bạn hỏi npm là gì?

Npm (Trình quản lý gói nút)

Npm là một bộ sưu tập các plugin JavaScript (được gọi là gói) được cập nhật liên tục, được viết bởi các nhà phát triển trên khắp thế giới. Gulp là một trong những plugin đó. (Bạn cũng sẽ cần một vài thứ nữa mà chúng ta sẽ nói đến sau.)

Cái hay của npm là nó cho phép bạn cài đặt các gói trực tiếp trên dòng lệnh của mình. Điều này thật tuyệt vì bạn không phải truy cập trang web theo cách thủ công, tải xuống và thực thi tệp để cài đặt.

Đây là cú pháp cơ bản để cài đặt một gói:

npm install [Package Name]

Có vẻ khá đơn giản, phải không?

Thư mục node_modules

Một điều cần lưu ý, khi bạn cài đặt gói npm, npm sẽ tạo một thư mục có tên là node_modules và lưu trữ tất cả các tệp gói ở đó.

Nếu bạn đã từng có một dự án với thư mục node_modules và dám xem nó chứa những gì, bạn có thể thấy rằng nó có rất nhiều (và ý tôi là RẤT NHIỀU) các thư mục và tệp được lồng vào nhau.

Tại sao điều này xảy ra?

Điều này là do các gói npm có xu hướng dựa vào các gói npm khác để chạy chức năng cụ thể của chúng. Các gói khác này được gọi là gói phụ thuộc.

Nếu bạn đang viết một plugin, bạn nên tận dụng các chức năng của các gói hiện có. Không ai muốn phát minh lại bánh xe mỗi lần.

Vì vậy, khi bạn cài đặt một plugin vào thư mục node_modules của mình, plugin đó sau đó sẽ cài đặt các gói bổ sung mà * nó * cần vào thư mục node_modules của chính nó.

Và cứ tiếp tục như vậy cho đến khi bạn có các thư mục lồng vào nhau trong wazoo.

Bạn không cần phải lo lắng quá nhiều về việc lộn xộn trong thư mục node_modules vào thời điểm này - chỉ muốn giải thích ngắn gọn những gì đang xảy ra trong thư mục điên rồ đó 🙂

Theo dõi các gói với package.json

Một tính năng thú vị khác của npm là nó có thể nhớ những gói cụ thể nào bạn đã cài đặt cho dự án của mình.

Điều này rất quan trọng trong trường hợp bạn phải cài đặt lại mọi thứ vì lý do nào đó.

Ngoài ra, nó giúp cuộc sống của các nhà phát triển khác trở nên dễ dàng hơn vì họ có thể nhanh chóng và dễ dàng cài đặt tất cả các gói cho dự án của bạn trên máy tính của họ.

Nó quản lý như thế nào để thực hiện điều này?

Npm sử dụng một tệp có tên là package.json để theo dõi những gói nào và những phiên bản gói nào bạn đã cài đặt. Nó cũng lưu trữ thông tin khác về dự án, như tên, tác giả và kho lưu trữ Git.

Tạo package.json của bạn

Để khởi tạo tệp này, bạn có thể sử dụng lại dòng lệnh.

Đầu tiên, điều hướng đến thư mục dự án của bạn, bất cứ nơi nào bạn đặt nó trên máy tính của mình.

Sau đó nhập lệnh sau:npm init

Npm sau đó sẽ nhắc bạn nhập thông tin về dự án. Đối với phần lớn các tùy chọn, bạn có thể nhấn enter và sử dụng giá trị mặc định nằm trong dấu ngoặc đơn.

Khi bạn hoàn tất, npm sẽ tạo tệp package.json trong thư mục dự án của bạn! Nếu bạn mở nó trong trình chỉnh sửa của mình, bạn sẽ thấy một cái gì đó như sau:

{
  "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"
}

Rõ ràng là đối với dự án của bạn, bạn sẽ có tên và thông tin của riêng bạn thay vì những gì tôi có ở đây.

Tại thời điểm này, tôi sẽ không lo lắng về việc làm cho tất cả các trường chính xác. Phần thông tin này chủ yếu được sử dụng cho các gói được xuất bản lên npm dưới dạng plugin công khai.

Bây giờ, những gì bạn * sẽ * đưa vào tệp package.json của mình là danh sách tất cả các gói bạn cần để chạy Gulp.

Hãy xem cách bạn có thể thêm chúng vào:

Cài đặt gói

Trong phần trước ở trên, chúng ta đã nói về cách nhập npm install [Package Name]

vào dòng lệnh của bạn, để tải xuống và cài đặt gói vào thư mục node_modules của bạn.

Nó sẽ cài đặt gói và tự động lưu vào tệp package.json của bạn dưới dạng phụ thuộc.

Vì vậy, nếu chúng tôi muốn cài đặt Gulp vào các gói của mình, chúng tôi phải nhập:npm install gulp

Có thể mất một hoặc hai phút để máy tính của bạn cài đặt mọi thứ liên quan đến Gulp. Bạn có thể sẽ thấy một số thông báo cảnh báo, nhưng tôi sẽ không lo lắng về những thông báo đó trừ khi cài đặt không thành công.

Bây giờ, nếu bạn mở tệp package.json của mình, bạn sẽ thấy ở dưới cùng rằng Gulp đã được thêm vào làm phụ thuộc:

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

Danh sách các phần phụ thuộc này sẽ phát triển khi bạn cài đặt các gói npm bổ sung.

Các gói khác cần thiết cho Gulp

Ban đầu, chúng tôi muốn sử dụng Gulp để chạy các tác vụ như biên dịch các tệp SCSS / CSS và JS của bạn. Để thực hiện điều này, chúng tôi sẽ sử dụng các gói sau:

gulp-sass - biên dịch các tệp Sass của bạn thành CSS
gulp-cssnano - thu nhỏ các tệp CSS của bạn
gulp-concat - nối (kết hợp) nhiều tệp JS thành một tệp lớn
gulp-uglify - thu nhỏ các tệp JS của bạn

Cũng giống như trước đây, hãy cài đặt từng gói bằng cách gõ từng dòng một. Bạn sẽ phải đợi vài giây trong khi cài đặt từng cái trước khi chuyển sang dòng tiếp theo.

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

Gulp-cli so với Global Gulp

Trước đây, để có thể chạy “gulp” từ dòng lệnh của mình, bạn sẽ phải cài đặt Gulp trên toàn cầu trên máy tính cục bộ của mình, sử dụng lệnh “npm install –global gulp”.

Tuy nhiên, việc có một phiên bản Gulp toàn cầu duy nhất có thể gây ra sự cố nếu bạn có nhiều dự án, tất cả đều yêu cầu các phiên bản Gulp khác nhau.

Sự đồng thuận hiện tại khuyến nghị cài đặt một gói khác, Gulp-cli, trên toàn cầu thay vì chính Gulp.

Điều này sẽ cho phép bạn vẫn chạy lệnh “gulp”, nhưng bạn có thể sử dụng các phiên bản Gulp khác nhau trên các dự án khác nhau của mình.

Đây là mã cho điều đó:

npm install --global gulp-cli

Nếu bạn quan tâm, bạn có thể đọc thêm ngữ cảnh trên chuỗi Treehouse này.

Được rồi, sau khi tất cả các gói của bạn được cài đặt, bạn có tất cả các công cụ bạn cần. Hãy chuyển sang thiết lập tệp dự án của chúng tôi!

Thiết lập cấu trúc tệp của bạn

Trước khi chúng tôi bắt đầu tạo tệp và thư mục, chỉ cần biết rằng có nhiều cách khác nhau để thiết lập cấu trúc tệp của bạn. Cách tiếp cận mà bạn sẽ sử dụng là tốt cho các dự án cơ bản, nhưng việc thiết lập "đúng" sẽ phụ thuộc rất nhiều vào nhu cầu cụ thể của bạn.

Phương pháp cơ bản này sẽ giúp bạn nắm được chức năng cơ bản của tất cả các bộ phận chuyển động. Sau đó, bạn có thể xây dựng hoặc thay đổi thiết lập theo ý thích của mình trong tương lai!

Đây là cây dự án sẽ trông như thế nào:

Thư mục Dự án gốc
- index.html
- gulpfile.js
- package.json
- node_modules (thư mục)
- ứng dụng (thư mục)
- script.js
- style.scss
- dist (thư mục)

Chúng ta đã xem qua tệp package.json và thư mục node_modules. Và tệp index.html tất nhiên sẽ là tệp trang web chính của bạn.

Tệp gulpfile.js là nơi chúng ta sẽ định cấu hình Gulp để chạy tất cả các tác vụ mà chúng ta đã đề cập ở phần đầu của bài viết này. Chúng tôi sẽ giải quyết vấn đề đó sau một chút.

Nhưng ngay bây giờ tôi muốn đề cập đến hai thư mục, app và dist, vì chúng rất quan trọng đối với quy trình làm việc của Gulp.

Thư mục ứng dụng và phân phối

Trong thư mục ứng dụng, chúng tôi có tệp JavaScript cơ bản (script.js) và tệp SCSS cơ bản của bạn (style.scss). Các tệp đó là nơi bạn sẽ viết tất cả mã JS và CSS của mình.

Thư mục dist chỉ tồn tại để lưu trữ các tệp JS và CSS được biên dịch cuối cùng sau khi Gulp đã xử lý chúng. Bạn không nên thực hiện bất kỳ thay đổi nào trong các tệp dist, chỉ các tệp ứng dụng. Nhưng những tệp này trong dist là những gì sẽ được tải trong index.html, vì chúng tôi muốn sử dụng các tệp đã biên dịch trong trang web.

Một lần nữa, có rất nhiều cách bạn có thể thiết lập các tệp và thư mục dự án của mình. Điều quan trọng chính cần ghi nhớ là cấu trúc của bạn có ý nghĩa và cho phép bạn làm việc hiệu quả nhất.

Bây giờ chúng ta hãy bắt đầu phần nội dung của hướng dẫn này, định cấu hình Gulp!

Tạo và định cấu hình Gulpfile của bạn

Gulpfile chứa mã để tải các gói đã cài đặt và chạy các chức năng khác nhau. Mã thực hiện hai chức năng cơ bản:

Khởi tạo các gói đã cài đặt của bạn dưới dạng mô-đun Node.
Tạo và chạy các tác vụ Gulp.

Khởi tạo gói

Để tận dụng tất cả các tính năng của gói npm mà bạn đã thêm vào dự án của mình, bạn cần xuất chúng dưới dạng mô-đun trong Node. (Do đó, tên thư mục “node_modules”)

Ở đầu Gulpfile của bạn, thêm các mô-đun như sau:

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ác gói đã được thêm vào, sau đó bạn có thể sử dụng các chức năng và đối tượng của chúng trong các tập lệnh Gulpfile của mình. Bạn cũng sẽ sử dụng một số chức năng tích hợp là một phần của Node.js.

Tạo tác vụ Gulp của bạn

Việc tạo một tác vụ Gulp được thực hiện bằng cách sử dụng mã sau:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

Điều này cho phép bạn chạy tác vụ Gulp bằng cách nhập vào gulp [Function Name] vào dòng lệnh. Điều này rất quan trọng vì sau đó bạn có thể chạy hàm được đặt tên đó từ các tác vụ Gulp khác.

Cụ thể, chúng tôi đang xây dựng một số tác vụ Gulp khác nhau, các tác vụ này sẽ * tất cả * được chạy khi bạn chạy tác vụ Gulp mặc định.

Một số chức năng chính mà chúng tôi sẽ sử dụng là:

.task () - Tạo một nhiệm vụ, như đã đề cập ở trên
.src () - xác định những tệp nào bạn sẽ biên dịch trong một tác vụ cụ thể
.pipe () - thêm một hàm vào luồng Node mà Gulp đang sử dụng; bạn có thể kết hợp nhiều chức năng trong cùng một tác vụ (đọc một bài viết xuất sắc về chủ đề này trên florian.ec)
.dest () - ghi tệp kết quả vào một vị trí cụ thể
.watch () - xác định các tệp để phát hiện bất kỳ thay đổi nào trên

Nếu bạn tò mò, bạn có thể đọc thêm tài liệu về Gulp tại đây.

Tất cả các thiết lập? Bây giờ chúng ta hãy bắt tay vào công việc (gợi ý nhạc Hoa Mộc Lan) và viết những nhiệm vụ đó!

Đây là những tác vụ sau mà chúng tôi muốn Gulp chạy:

Nhiệm vụ Sass để biên dịch SCSS thành một tệp CSS và rút gọn
Tác vụ JS để nối các tệp JS và minify / uglify
Xem tác vụ để phát hiện khi nào các tệp SCSS hoặc JS bị thay đổi và chạy lại các tác vụ
Tác vụ mặc định để chạy tất cả các tác vụ cần thiết khi bạn nhập gulp vào dòng lệnh

Nhiệm vụ thất thường

Đối với nhiệm vụ Sass, trước tiên, chúng tôi muốn tạo nhiệm vụ trong Gulp bằng cách sử dụng task () và chúng tôi sẽ đặt tên cho nó là “sass.”

Sau đó, chúng tôi thêm vào mỗi thành phần mà tác vụ sẽ chạy. Đầu tiên, chúng tôi sẽ chỉ định rằng nguồn sẽ là tệp app / scss / style.scss, sử dụng src (). Sau đó, chúng tôi sẽ phân tích các chức năng bổ sung.

Cái đầu tiên chạy hàm sass () (sử dụng mô-đun gulp-sass mà chúng tôi gọi là “sass” ở trên cùng của Gulpfile). Nó sẽ tự động lưu tệp CSS có cùng tên với tệp SCSS, vì vậy tệp của chúng tôi sẽ được đặt tên là style.css.

Cái thứ hai thu nhỏ tệp CSS bằng cssnano (). Và cuối cùng đặt tệp CSS kết quả vào thư mục dist / css.

Đây là mã cho tất cả những điều đó:

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

Để kiểm tra, tôi chỉ cần đặt một số SCSS điền vào tệp style.scss:

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

Bạn có thể chạy từng tác vụ Gulp riêng lẻ trên dòng lệnh nếu bạn nhập gulp và tên của nhiệm vụ. Vì vậy, để kiểm tra tác vụ Sass, tôi đã nhập gulp sass để kiểm tra xem nó có hoạt động mà không có lỗi hay không và tạo tệp dist / style.css đã được rút gọn.

Nếu mọi thứ hoạt động bình thường, bạn sẽ thấy thông báo như thế này trong dòng lệnh của mình:

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

Kiểm tra trong thư mục dist cho thấy rằng thực sự có tệp style.css và mở tệp đó sẽ hiển thị CSS được rút gọn chính xác:

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

Ok, nhiệm vụ Sass của chúng ta đã xong. Chuyển sang JavaScript!

Tác vụ JS

Tác vụ JavaScript Gulp tương tự như tác vụ Sass, nhưng có một số yếu tố khác nhau.

Trước tiên, chúng tôi sẽ tạo nhiệm vụ và gọi nó là “js”, sau đó chúng tôi sẽ xác định các tệp nguồn. Trong hàm src (), bạn có thể xác định nhiều tệp theo một vài cách khác nhau.

Một là sử dụng ký tự đại diện (*) để yêu cầu Gulp sử dụng tất cả các tệp có phần mở rộng * .js như sau:

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

Tuy nhiên, điều này sẽ biên dịch các tệp theo thứ tự bảng chữ cái, điều này có thể có khả năng gây ra lỗi nếu bạn tải các tập lệnh phụ thuộc vào các tập lệnh khác trước các tệp tập lệnh khác đó.

Bạn có thể kiểm soát thứ tự bằng cách chỉ định thủ công từng tệp JS nếu bạn không có quá nhiều tệp tập lệnh. Hàm src () có thể nhận một mảng giá trị làm tham số, bằng cách sử dụng dấu ngoặc vuông như sau:

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

Nếu bạn có nhiều tệp JS, bạn có thể đảm bảo rằng bạn tải các phần phụ thuộc trước tiên bằng cách giữ chúng trong một thư mục con riêng biệt, chẳng hạn như “app / js / plugins”. Sau đó, giữ các tệp JS khác trong thư mục mẹ “app / js”.

Sau đó, bạn có thể sử dụng ký tự đại diện để tải tất cả các tập lệnh lib (thư viện), theo sau là các tập lệnh thông thường:

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

Cách tiếp cận của bạn sẽ khác nhau tùy thuộc vào số lượng và loại tệp JS mà bạn có.

Khi bạn đã đặt các tệp nguồn của mình, bạn sẽ chuyển sang các chức năng còn lại. Đầu tiên là nối các tệp thành một tệp JS lớn. Hàm concat () yêu cầu một tham số cùng với tên của tệp kết quả.

Sau đó, bạn sẽ xóa tệp JS và lưu nó vào vị trí đích.

Đây là mã hoàn chỉnh cho tác vụ JavaScript:

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

Cũng giống như tác vụ Sass, bạn có thể kiểm tra xem tác vụ JS có hoạt động hay không bằng cách nhập vào gulp js vào dòng lệnh.

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

Bây giờ chúng ta đã hoàn thành hai nhiệm vụ chính của worker Gulp, chúng ta có thể chuyển sang nhiệm vụ Watch.

Xem tác vụ

Tác vụ Watch sẽ xem các tệp mà bạn yêu cầu nó để biết bất kỳ thay đổi nào. Sau khi phát hiện thay đổi, nó sẽ chạy các tác vụ mà bạn chỉ định và sau đó tiếp tục theo dõi các thay đổi.

Chúng tôi sẽ tạo hai chức năng xem, một để xem các tệp SCSS và một để xem các tệp JS.

Hàm watch () nhận hai tham số:vị trí nguồn và sau đó là các tác vụ sẽ chạy khi phát hiện thay đổi.

Chức năng Sass Watch sẽ xem bất kỳ tệp SCSS nào trong thư mục ứng dụng và sau đó chạy tác vụ Sass nếu phát hiện thay đổi.

Hàm sẽ giống như sau:

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

Đối với chức năng Xem JavaScript, chúng tôi sẽ phải tận dụng một tính năng Node thực sự hữu ích được gọi là “globbing”. Globbing đề cập đến việc sử dụng các ký hiệu “**” như một loại ký tự đại diện cho các thư mục và thư mục con. Chúng tôi cần nó cho các tệp JS vì chúng tôi có một tệp JS trong thư mục app / js và một tệp JS trong thư mục app / js / plugins.

Và đây là chức năng đó sẽ trông như thế nào:

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

Cách thức hoạt động của global (“**”) là nó sẽ tìm kiếm các tệp JS ở bất kỳ đâu trong thư mục app / js. Nó sẽ trông trực tiếp trong thư mục hoặc trong bất kỳ thư mục con nào tiếp theo, chẳng hạn như thư mục plugin. Quả cầu rất hữu ích để bạn không phải chỉ định từng thư mục con làm nguồn riêng biệt trong hàm watch ().

Đây là nhiệm vụ Xem hoàn chỉnh:

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

Bây giờ chúng ta sắp hoàn thành! Tác vụ cuối cùng cần tạo là tác vụ Gulp mặc định.

Tác vụ Gulp mặc định

Tác vụ Gulp mặc định là những gì bạn muốn chạy khi bạn chỉ cần nhập gulp trong dòng lệnh. Khi bạn tạo nhiệm vụ, bạn phải gọi nó là "mặc định" để Gulp nhận ra đó là những gì bạn muốn chạy.

Những gì chúng tôi muốn làm là chạy các tác vụ Sass và JS một lần, sau đó chạy tác vụ Watch để chạy lại các tác vụ khi các tệp được thay đổi.

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

Bạn có thể tạo các tác vụ khác để chạy các bản dựng của mình, chỉ cần không sử dụng lại tên "mặc định". Ví dụ:giả sử bạn muốn để các tệp CSS và JS của mình không được hợp nhất theo mặc định, nhưng bạn muốn giảm thiểu chúng để sản xuất.

Bạn có thể tạo các tác vụ Gulp riêng biệt để giảm thiểu các tệp CSS và JS được gọi là “minifyCSS” và “minifyJS”. Sau đó, bạn sẽ không thêm các nhiệm vụ đó vào nhiệm vụ Gulp mặc định của mình, nhưng bạn có thể tạo một nhiệm vụ Gulp mới có tên là “prod” có mọi thứ mà nhiệm vụ mặc định có và cũng có các nhiệm vụ thu nhỏ của bạn.

Tham chiếu trong index.html của bạn

Khi bạn đã làm cho quy trình Gulp của mình hoạt động, hãy đảm bảo rằng tệp index.html của bạn tham chiếu đến tất cả các tệp CSS và JS chính xác.

Đối với các ví dụ tôi đã cung cấp cho bạn ở đây, bạn sẽ muốn thêm tham chiếu CSS vào dist/style.css trong của bạn:

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

Và thêm thẻ tập lệnh tham chiếu dist/all.js trong của bạn:

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

Đang kết thúc

Chúc mừng bạn đã vượt qua! Tôi hy vọng rằng bạn thấy hướng dẫn Gulp cơ bản này hữu ích.

Giống như tôi đã đề cập ở phần đầu, đây chỉ là một hướng dẫn rất đơn giản về những điều cơ bản của npm và Gulp.

Hầu hết các nhà phát triển thêm nhiều tác vụ bổ sung vào Gulpfile của họ. Hãy cho tôi biết nếu bạn muốn xem một bài viết khác về các chủ đề nâng cao hơn đó!

Cuối cùng, bạn có thể xem tất cả mã từ hướng dẫn này trên tài khoản GitHub của tôi tại đây.

Nếu bạn thích hướng dẫn này, vui lòng chia sẻ nó và / hoặc để lại bình luận bên dưới với suy nghĩ của bạn!