Gulp Là Gì

Gulp.js Là Gì

Gulp.js là 1 task runner được sử dụng để giúp những thiết kế viền front-over hoàn toàn có thể tự động hóa hóa những nhiệm vụ tẻ nhạt mà người ta cần có tác dụng lặp đi tái diễn những lần trong quy trình trở nên tân tiến với kiến thiết dự án. Grunt.js là một task runner phổ cập tốt nhất hiện nay và được nhiều xây dựng viên thực hiện để giúp đỡ tự động hóa hoá các công việc vào trong dự án công trình.

Bạn đang xem: Gulp là gì

Gulp.js thực hiện phép tắc convention over configuration tuyệt code over configuration trong quá trình cài đặt dự án công trình. Với nguyên lý này thì những vụ việc rõ ràng trong lập trình nhỏng tổ chức cấu tạo thư mục ra sao, đặt các tập tin css tuyệt javascript nơi đâu... được chuẩn chỉnh hoá trước khi bất cứ một tập tin, thư mục như thế nào được tạo ra hay đoạn code như thế nào được viết ra. Điều này góp sút con số những đưa ra quyết định cơ mà thiết kế viên cần chỉ dẫn và hỗ trợ cho câu hỏi maintain dự án công trình trnghỉ ngơi cần dễ ợt. Dưới đấy là một ví dụ về phong thái tổ chức triển khai một tlỗi mục dự án đặc thù để có thể sử dụng Gulp.js một biện pháp dễ dàng:

|- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.jsonTrong phần khám phá về kiểu cách thông số kỹ thuật Gulp.js nhằm chạy các trọng trách một phương pháp tự động, bạn sẽ đọc tại sao Gulp.js thực hiện cách thức bên trên. Bây giờ họ cùng cả nhà khám phá bí quyết cài đặt Gulp.js

Cài Đặt Gulp.js

Để setup được Gulp bạn phải cài đặt:

Cmùi hương trình Node.js (hay Node) vàCmùi hương trình làm chủ những gói package node package manager hay NPM.

Nếu máy vi tính chúng ta đang cài đặt 2 chương trình trên thì chúng ta cũng có thể thiết lập Gulp sử dụg một câu lệnh độc nhất vô nhị trên cửa sổ loại lệnh:

$ suvì chưng npm install gulp -gỞ trên họ thực hiện optoin -g (viết tắt của globally) để triển khai bài toán thiết lập toàn bộ Gulptrên máy tính. Sau Lúc thiết đặt chấm dứt bạn có thể bình chọn lại bằng Việc chạy câu lệnh:

$ gulp --vCửa sổ mẫu lệnh đã hiển thị ban bố về phiên phiên bản bây giờ của Gulp cho chính mình.

Cấu Hình Gulp.js

Gulp.js sử dụng tập tin gulptệp tin.js nhằm thông số kỹ thuật những tasks mà lại nó vẫn chạy trong dự án. quý khách nên sinh sản tập tin này bên trên thỏng mục gốc của dự án. Tiếp theo họ sẽ sử dụng tập tin này sẽ giúp đỡ tự động hoá câu hỏi chuyển đổi tập tin được viết theo cú pháp của SASS sang trọng tập tin vietes theo cú pháp CSS thông thường. Sau Lúc chế tạo ra xong xuôi tập tin guilptệp tin.js nhỏng khuyên bảo sinh sống trên, chúng ta chnghiền vào tập tin này nội dung sau:

var gulp = require("gulp");// gulp-sass pluginvar sass = require("gulp-sass");Tại trên họ sử dụng package gulp-sass như một plugin (trình cắm) của Gulp để giúp thực hiện Việc đổi khác từ bỏ sass thanh lịch css. Và như vậy bọn họ đang đề nghị setup gulp-sass plugin:

$ npm install gulp-sass --save-devCâu lệnh trên sẽ setup gói package gulp-sass nội cỗ (locally) bên cạnh đó update tập tin package.json của npm bằng phương pháp thêm gói package gulp-sass vào phần dựa vào (dependencies) thực hiện vào môi trường thiên nhiên development. quý khách hoàn toàn có thể từ soát sổ lại điều này bằng cách msinh sống tập tin package.json.

Sau Khi thiết lập gulp-sass, bạn cập nhật câu chữ gulpfile.js bằng cách thêm đoạn mã sau vào phía cuối tập tin này:

gulp.task("sass", function() return gulp.src("app/scss/styles.scss") // thông số kỹ thuật gulp tác động của tập tin nguồn sass .pipe(sass()) // đưa tập tin mối cung cấp sass thành tập tin css .pipe(gulp.dest("app/css")) // cửa hàng tập tin css sẽ được lưu lại lại);Tuy nhiên, để hoàn toàn có thể tiếp tục bạn cần tạo thêm 3 tlỗi mục app, css cùng sass nhỏng kết cấu bên dưới đây:

|- app/ |- css/ |- sass/Bây tiếng vào thư mục sass các bạn hãy tạo ra một tập tin styles.scss cùng với nội dung nlỗi sau:

// styles.scss.testing width: percentage(5/7);Tiếp theo trên hành lang cửa số cái lệnh các bạn chạy:

$ gulp sassKết thúc câu lệnh này các bạn sẽ thấy một tập tin styles.css được tạo nên vào thỏng mục css với văn bản nhỏng sau:

/* styles.css */.testing width: 71.42857%; Vậy nên Gulp đã giúp bọn họ biến đổi văn bản gồm trong tập tin styles.scss (dùng cú pháp SASS) thanh lịch ngôn từ tập tin styles.css (cần sử dụng cú pháp CSS thông thường).

Xem thêm: Cách Chơi Liên Minh Huyền Thoại Và Các Phím Tắt Trong Game, Cách Để Chơi Lmht Từ Căn Bản Đến Cao Thủ

Tự Động Hoá với Watch

Ở trên chúng ta new chỉ tiến hành các bước thay đổi từ sass sang css một biện pháp hơi thủ công bằng tay. Để góp vấn đề chuyển đổi này được triển khai một giải pháp auto chúng ta áp dụng một kĩ năng được Gulp cung cấp sẵn có tên là watch. Với tuấn kiệt này các bạn sẽ rất có thể thiết đặt để những tasks trong Gulp tự động hóa được thực hiện Khi nội dung của các tập tin mà lại bạn cần theo dõi biến hóa.

Với ví dụ của họ các bạn thêm câu lệnh sau vào phía cuối tập tin gulptệp tin.js:

gulp.task("watch", function() gulp.watch("app/scss/*.scss", <"sass">); // Other watchers)Câu lệnh này thông báo cùng với Gulp rằng nó sẽ cần phải quan sát và theo dõi tất cả các tập tin bao gồm song là .scss đặt vào thỏng mục app/scss và khi nào bao gồm chuyển đổi văn bản của một trong số tập tin vào tlỗi mục thì task được lấy tên là sass sẽ được triển khai.

Tiếp theo để bắt đầu công dụng watch này bạn phải chạy câu lệnh sau:

$ gulp watchBạn đang thấy cửa sổ loại lệnh hiển thị công dụng như hình dưới đây:

*

Cuối cùng các bạn hãy chuyển đổi văn bản tập tin scss giúp thấy những tasks tự động hóa được chạy.

*

Kết luận: Tới đây chúng ta đã tìm hiểu quá trình thứ nhất nhằm hoàn toàn có thể cài đặt và sử dụng Gulp trong dự án công trình. Ngoài câu hỏi chuyển đổi tập tin trường đoản cú SASS lịch sự CSS nlỗi ví dụ vào nội dung bài viết, Gulp còn cung cấp những tác dụng hữu dùng không giống thông qua những plugin của nó. Tuỳ thuộc vào nhu cầu phát sinh trong dự án cơ mà chúng ta đang đưa ra quyết định thực hiện plugin như thế nào. Các plugin của Gulp các được cải cách và phát triển bên dưới dạng module của Node.js vì vậy chúng ta có thể tìm kiếm kiếm các plugin của Gulp thông qua kho package npm.