GULP VÀ NHỮNG KHÁI NIỆM CƠ BẢN NHẤT

Gulp là gì?

Gulp là 1 trong những luật khiến cho bạn tự động hóa hóa các task (nhiệm vụ) vào quy trình cải tiến và phát triển website. Nó thường được thực hiện để làm các tác vụ front over như:

Tạo ra một web serverReloadtrình duyệt y một giải pháp auto bất kể bao giờ một tệp tin được lưuSử dụng những preprocessor giống như Sass hoặc LESSTối ưu hóa những tài ngulặng nlỗi CSS, JavaScript với hình ảnh

Đây không hẳn là một trong những danh sách trọn vẹn về đều vật dụng cơ mà Gulp hoàn toàn có thể có tác dụng. Nếu mong mỏi, chúng ta cũng có thể sinh sản một generator website site tĩnh.Gulp cực kì khỏe khoắn, dẫu vậy bạn phải học tập cách thực hiện Gulp nếu còn muốn tạo thành một quá trình (process) của riêng biệt mình.Quý khách hàng vẫn xem: Gulp là gì

Bài viết này sẽ giúp đỡ các bạn bao gồm kỹ năng và kiến thức cơ bạn dạng về Gulp kế tiếp bạn cũng có thể từ bỏ bản thân mày mò mọi lắp thêm.

Bạn đang xem: Gulp và những khái niệm cơ bản nhất

Trước khi đi sâu vào Gulp, hãy nói tới nguyên do tại sao chúng ta áp dụng Gulp mà lại không hẳn các luật không giống.

Tại sao lại là Gulp?

Những nguyên tắc nhỏng Gulp thường được nói như thể "build tools" cũng chính vì chúng là rất nhiều lao lý thực hiện những task vào quá trình xuất bản một trang web. Hai build tools thịnh hành độc nhất hiện thời là Gulp với Grunt. Tất nhiên, vẫn có đa số phương pháp khác ví dụ như Broccoli, Brunch.

Có những bài viết đề cập đến sự khác biệt giữa Grunt với Gulp và nguyên nhân tại sao chúng ta lại áp dụng nguyên tắc này mà lại không hẳn là các quy định không giống. Nhưng điểm khác biệt đó là bí quyết bạn thông số kỹ thuật một workflow cùng với chúng. Gulpcấu hình ngắn hơn với dễ dàng và đơn giản rộng lúc so sánh cùng với Grunt. Gulp cũng chạy nkhô nóng rộng.

Cái bọn họ đang làm

lúc hoàn thành bài viết này, các bạn sẽ có một workflow triển khai những task sau:

Tạo ra một web serverBiên dịch Sass thành CSSRefesh trình coi xét tự động bất cứ khi nào các bạn lưu lại một fileTối ưu hóa những tài nguyên ổn (CSS, JS, fonts, và hình ảnh) mang lại phiên bảnproduction

Bạn cũng trở thành học tập bí quyết nối một chuỗi những task khác nhau vào mộtlệnh đơn giản và dễ dàng.

Hãy ban đầu bằng phương pháp thiết lập Gulp trên máy tính của người tiêu dùng.

Cài đặt Gulp

quý khách phải cài đặtNode.js trước lúc rất có thể mua đặtGulp.

Sau Khi đã thiết đặt Node, bạn cũng có thể setup Gulp bằng cách sử dụng lệnh sau:

$ subởi npm install gulp -gCrúc ý: chỉ số đông người sử dụng Mac mới bắt buộc sử dụng trường đoản cú khóa sudo

npm install làlệnh thực hiện Node Package Manager (npm) để thiết đặt Gulp bên trên máy tính xách tay của người tiêu dùng.

Cờ -g vào lệnh này nói cùng với npm cài đặt Gulp với phạm vi toàn thể bên trên laptop của bạn, nó chất nhận được thực hiện lệnh gulp làm việc bất kỳ đâu trên hệ thống của khách hàng.

Bây giờ Gulp đã có được cài đặt, hãy tạo ra một dự án công trình sử dụng Gulp.

Tạo một Gulp project

Trước tiên, bọn họ sẽ tạo nên ra một thư mục project. Đây đang là thỏng mục nơi bắt đầu của dự án. Di đưa vào thư mục project và chạy lệnh npm init:

# ... from within our project folder$ npm initLệnh npm init sẽ khởi tạo ra một file package.json tàng trữ các biết tin về project, nlỗi những dependencies được sử dụng trong dự án (Gulp là 1 trong dependency).

npm initvẫn yên cầu chúng ta xác nhận:


*

Khi tệp tin package.json đã có được sinh sản, bạn có thể thiết lập Gulp vào dự án bằng phương pháp sử dụng lệnh:

$ npm install gulp --save-devLệnh này đã setup Gulp vào project của khách hàng nạm bởi cài đặt cục bộ.

Cờ --save-devđã thêm gulp nhỏng một dev dependency vào package.json.


*

Nếu khám nghiệm thư mục project khi lệnh đã xúc tiến dứt, các bạn sẽ thấy tất cả thêm thỏng mục node_modules. quý khách hàng cũng thấy được thư mục gulp vào node_modules.


*

Chúng ta gần như đã chuẩn bị sẵn sàng để ban đầu làm việc cùng với Gulp. Nhưng trước khi làm điều này, chúng ta bắt buộc khẳng định giải pháp bọn họ sử dụng Gulp mang lại project, với 1 phần trong số đó là lựa chọn một kết cấu thư mục.

Chọn kết cấu tlỗi mục

Gulp đủ linch hoạt để làm việc với đa số cấu trúc thỏng mục. Trong nội dung bài viết này, bọn họ vẫn thực hiện một kết cấu thường xuyên thấy:

|- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulptệp tin.js |- node_modules/ |- package.jsonTrong cấu trúc này, họ đang áp dụng tlỗi mục phầm mềm cho mục tiêu cách tân và phát triển, trong những khi tlỗi mục dist (distribution) được sử dụng nhằm đựng các tệp tin đã được về tối ưu cho website site production.

Bây giờ đồng hồ, hãy ban đầu bằng phương pháp tạo nên Gulp task trước tiên của chúng ta trong gulptệp tin.js, chiếc tàng trữ toàn bộ cấu hình của Gulp.

Viết Gulp task đầu tiên

Cách trước tiên nhằm thực hiện Gulp là require trong gulpfile.

var gulp = require("gulp");Câu lệnh require nói cùng với Node tìm kiếm vào tlỗi mục node_modules package mang tên gulp. khi package được tra cứu thấy, bọn họ gán văn bản tới biến chuyển gulp.

Bây tiếng chúng ta cũng có thể viết một gulp task. Cú pháp cơ phiên bản nlỗi sau:

gulp.task("task-name", function() // Stuff here);task-name là tên của task, loại sửdụng Khi bạn có nhu cầu chạy một task trong Gulp. quý khách cũng rất có thể chạy task đó vào commvà line bởi lệnh gulp task-name.

Để bình chọn, sinh sản một task hello, chiếc in ra "Hello Zell".

gulp.task("hello", function() console.log("Hello Zell"););Chúng ta có thể chạy task với lệnh gulp hello.

$ gulp helloLệnh trên vẫn in ra "Hello Zell".


*

Thực tế, những Gulp task sẽ phức hợp hơn một chút. Nó hay chứa rộng 2 thủ tục Gulp, cùng với rất nhiều plugin của Gulp.

Một task thực thụ đã giống hệt như cầm này:

gulp.task("task-name", function () return gulp.src("source-files") // Get source files with gulp.src .pipe(aGulpPlugin()) // Sends it through a gulp plugin .pipe(gulp.dest("destination")) // Outputs the tệp tin in the destination folder)gulp.src nói cùng với Gulp task các file được thực hiện, trong những khi gulp.dest nói cùng với Gulp chỗ cất các file kết quả Khi task hoàn toàn.

Hãy demo kiến tạo một task thực thụ, biên dịch các file Sass thành CSS.

Preprocessing với Gulp

Chúng ta cũng thêm cờ --save-dev để bảo đảm gulp-sass được thêm vào devDependencies vào package.json.

Xem thêm: Phần Mềm Sap Software Là Gì ? Tài Liệu Sarp Erp Mới Nhất 2020

$ npm install gulp-sass --save-devChúng ta cũng cần phải require gulp-sass như vẫn làm cùng với gulp trước lúc hoàn toàn có thể sử dụng:

var gulp = require("gulp");// Requires the gulp-sass pluginvar sass = require("gulp-sass");Chúng ta rất có thể áp dụng gulp-sass bằng cách sửa chữa thay thế aGulpPlugin() cùng với sass(). Chúng ta sẽ đánh tên task biên dịchSass thành CSS là sass.

gulp.task("sass", function() return gulp.src("source-files") .pipe(sass()) // Using gulp-sass .pipe(gulp.dest("destination")));Chúng buộc phải cung cấp đến task sass những file nguồn cùng một thư mục tiêu nhằm cất những file CSS, vì thế hãy tạo thành một tệp tin styles.scss trong thỏng mục app/scss. Đây là file sửa chữa mang đến source-files trong phương thứcgulp.src.

Chúng ta có muốn lưu giữ file hiệu quả styles.css tớitlỗi mục app/css, thay thế sửa chữa destinationvào cách thức gulp.dest với app/css.

gulp.task("sass", function() return gulp.src("app/scss/styles.scss") .pipe(sass()) // Converts Sass to lớn CSS with gulp-sass .pipe(gulp.dest("app/css")));quý khách rất có thể kiểm tratask sass đang thao tác làm việc đúng chuẩn chưa bằng cách thêm 1 hàm Sass vào file styles.scss.

// styles.scss.testing width: percentage(5/7);Nếu chạy gulp sass vào commvà line, các bạn sẽ thấy filestyles.css vào tlỗi mục app/css. Bên cạnh đó, nó sẽ có được ngôn từ như sau:

/* styles.css */.testing width: 71.42857%; Đó là giải pháp họ kiểm tratask sass đã thao tác làm việc tuyệt chưa.

Thỉnh phảng phất bọn họ cầnbiên dịch nhiều hơn thế một file .scss thành CSS. Chúng ta rất có thể làm vấn đề đó với Node globs.

Globbing trong Node

Globs giống như regular expressions, tuy thế giành cho đường dẫn file.

Hầu hết những workflow với Gulp hay chỉ từng trải 4 globbing pattern sau:

*.scss: * là ký kết tự đại diện thay mặt tất cả nghĩa tương xứng với mọi pattern trong tlỗi mục hiện tại. Trong ngôi trường hợp này, là tất cảtệp tin xong xuôi với .scss vào thư mục nơi bắt đầu (project).**/*.scss: Tất cả cácfile xong với .scss vào thư mục root với cáctlỗi mục nhỏ.!not-me.scss: ! báo hiệu Gulp đã bỏ lỡ pattern phù hợp. Trong ngôi trường vừa lòng này tệp tin not-me.scss sẽ được bỏ qua.*.+(scss|sass): Dấu + và () được cho phép Gulp kết hợp những pattern, các pattern khác biệt được phân làn vì ký trường đoản cú | .Trong trường thích hợp này là ngẫu nhiên file chấm dứt cùng với .scss hoặc .sass vào thư mục gốc.

Khi biết globbing, chúng ta cũng có thể sửa chữa thay thế app/scss/styles.scss với patternscss/**/*.scss, nó đã đem bất kỳ tệp tin như thế nào bao gồm phần không ngừng mở rộng .scss vào thư mục app/scss hoặc trongthư mục bé.

gulp.task("sass", function() return gulp.src("app/scss/**/*.scss") // Gets all files ending with .scss in app/scss và children dirs .pipe(sass()) .pipe(gulp.dest("app/css")))Mọi file Sass được kiếm tìm thấy vào app/scss đã tự động hóa tiếp tế task sasslàm việc trên. Nếu chúng ta thêm một file print.scss tới project, các bạn sẽ thấy print.css vào app/css.


*

Hiện giờ bọn chúng vẫn làm chủ được Việc biên dịch những tệp tin Sass thành CSS với cùng một lệnh duy nhất. Câu hỏi là, chúng ta vẫn đề nghị chạy lệnh gulp sass bất kể khi nào bọn họ chuyển đổi tệp tin sass nhằm biên dịch Sass thành CSS?

May mắn, chúng ta cũng có thể nói cùng với Gulp tự động chạy task sass bất cứ lúc nào một tệp tin được giữ thông sang 1 process điện thoại tư vấn là "watching".

Theo dõi sự biến hóa của các file Sass

Gulp cung cấp mang đến bọn họ cách thức watch, loại theo dõi và quan sát giả dụ một file được lưu giữ. Cú pháp của watch là:

// Gulp watch syntaxgulp.watch("files-to-watch", ); Nếu bọn họ ý muốn quan sát và theo dõi toàn bộ những tệp tin Sass cùng chạy task sass bất kể bao giờ một tệp tin Sass được lưu, họ chỉ cần sửa chữa files-to-watch với app/scss/**/*.scss, và với :

// Gulp watch syntaxgulp.watch("app/scss/**/*.scss", ); Trong thực tiễn, chúng ta đang muốn quan sát và theo dõi nhiều kiểu tệp tin một lúc. Để làm cho điều này, chúng ta cũng có thể gộp những tiến trình theo dõivào một task watch:

gulp.task("watch", function() gulp.watch("app/scss/**/*.scss", ); // Other watchers)Nếu chúng ta chạy lệnh gulp watch, bạn sẽ thấy Gulp bắt đầu quan sát và theo dõi ngay lập tức chớp nhoáng.


Và nó sẽ tự động hóa chạy task sass bất cứ bao giờ chúng ta lưu lại một tệp tin .scss

Bước tiếp theo sau là tạo nên Gulp reload lại trình phê duyệt bất kể bao giờ bọn họ lưu lại một file .scss với việc trợ giúp của Browser Sync.

Live-reloading cùng với Browser Sync

Browser Sync giúp vấn đề cải tiến và phát triển web thuận tiện rộng bằng phương pháp tạo nên một website hệ thống loại góp chúng ta live-reloading thuận lợi.

Trước tiên bọn chúng đã thiết đặt Browser Sync:

$ npm install browser-sync --save-devquý khách có thể lưu ý rằng không tồn tại chi phí tố gulp- Lúc thiết đặt Browser Sync. Bởi bởi vì Browser Sync không phải là 1 plugin của Gulp.

Để thực hiện, họ sẽ require Browser Sync.

var browserSync = require("browser-sync").create();Chúng ta cần tạo nên task browserSync để cho phép Gulp khởi tạo thành một VPS áp dụng Browser Sync. khi chạy hệ thống, họ cần đến Browser Sync biết thỏng mục nơi bắt đầu của VPS. Trong trường đúng theo này, nó là thư mục "app":

gulp.task("browserSync", function() browserSync.init( server: baseDir: "app" , ))Chúng ta cũng chuyển đổi task sass một ít bởi vì Browser Sync hoàn toàn có thể tiêm những style CSS bắt đầu (update CSS) vào trình ưng chuẩn, bất kể bao giờ task sass chạy.

gulp.task("sass", function() return gulp.src("app/scss/**/*.scss") // Gets all files ending with .scss in app/scss .pipe(sass()) .pipe(gulp.dest("app/css")) .pipe(browserSync.reload( stream: true )));Chúng ta đã cấu hình Browser Sync. Bây tiếng chúng ta chạy cả hai task watch và browserSync đồng thời để live-reloading.

Khá phiền phức khi mở cả hai của sổ commvà line và chạy gulp browserSync cùng gulp watch, hãy nhằm Gulp chạy bọn chúng đồng thời bằng cách nói mang đến task watch rằng browserSync phải xong trước lúc watch được có thể chấp nhận được chạy.

Chúng ta có thể làm cho vấn đề đó bằng phương pháp thêm tmê mẩn số thứ 2 cho tới watch task. Đây là cú pháp:

gulp.task("watch", , function () // ...)Và vào ngôi trường hòa hợp này bọn họ thêm browserSync task.

gulp.task("watch", , function () gulp.watch("app/scss/**/*.scss", ); // Other watchers)Chúng ta cũng muốn bảo đảm an toàn rằng sass đã chạy trước watch vì chưng CSS đã luôn là tiên tiến nhất ngẫu nhiên bao giờ chúng ta chạy một lệnh Gulp.

gulp.task("watch", , function () gulp.watch("app/scss/**/*.scss", ); // Other watchers);Bây giờ đồng hồ nếu như bạn chạy gulp watch vào commvà line, Gulp vẫn bước đầu cả hai sass cùng browserSync task đồng thời. Lúc cả hai task ngừng, watch đã chạy.


Tại cùng thời khắc, một hành lang cửa số trình chăm chú vẫn trỏ cho app/index.html đang nhảy lên. Nếu chúng ta chuyển đổi tệp tin styles.scss, các bạn sẽ thấy trình chăm chú đã auto reload.

Cuối thuộc, làm gắng làm sao trường hợp bạn muốn trình lưu ý tự động reload khibất kỳ tệp tin HTML hoặc JavaScript được lưu?

Chúng ta có thể có tác dụng bằng cách thêm 2 hoặc nhiều hơn thế các quá trình theo dõi, cùng call hàm browserSync.reload lúc 1 file được lưu:

gulp.task("watch", , function () gulp.watch("app/scss/**/*.scss", ); // Reloads the browser whenever HTML or JS files change gulp.watch("app/*.html", browserSync.reload); gulp.watch("app/js/**/*.js", browserSync.reload); );Đến trên đây chúng ta đang có tác dụng 3 thứ:

Khởi tạo thành một website serverSử dụng Sass preprocessorReloading trình chăm chút auto bất cứ khi nào một tệp tin được lưu

Phần tiếp theo sau vẫn đề cùa đến vấn đề về tối ưu các tài nguyên ổn. Chúng ta đang bắt đầu với bài toán buổi tối ưu hóa những file CSS cùng JavaScript.

Tối ưu hóa những file CSS với JavaScript

Các lập trình sẵn viên tất cả 2 task đề nghị triển khai Lúc nỗ lực tối ưu hóa các tệp tin CSS với JavaScript mang đến phiên bạn dạng production: nối file và minification.

Một vụ việc các xây dựng viên bắt buộc đương đầu là tương đối khó tất cả thểnối những tệp tin js theo đồ vật từ bỏ đúng mực.