Gulp là gì?

Gulp là 1 trong công cụ khiến cho bạn tự động hóa nhiều task (nhiệm vụ) vào quy trình trở nên tân tiến website. Nó thường được áp dụng để làm những tác vụ front end như:

Tạo ra một website server.Reload trình chăm sóc một cách tự động hóa bất kể lúc nào một tệp tin được giữ.Sử dụng những preprocessor y hệt như Sass hoặc LESS.Tối ưu hóa những tài ngulặng như CSS, JavaScript với hình hình ảnh.Đây không phải là một trong những list toàn vẹn về phần lớn vật dụng nhưng mà Gulp hoàn toàn có thể làm cho. Nếu ước ao, bạn có thể tạo một generator website site tĩnh. Gulp cực kì mạnh bạo, tuy vậy bạn phải học tập biện pháp thực hiện Gulp nếu như muốn tạo ra một quá trình (process) của riêng mình.Bài viết này sẽ giúp các bạn bao hàm kiến thức cơ bạn dạng về Gulp tiếp đến chúng ta có thể tự bản thân mày mò các vật dụng.Trước lúc đi sâu vào Gulp, hãy nói đến nguyên nhân tại sao bạn thực hiện Gulp mà chưa phải các quy định không giống.

Bạn đang xem: Giới thiệu về gulp js

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

Khi hoàn thành nội dung bài viết này, bạn sẽ tất cả một workflow thực hiện các task sau:

Tạo ra một website server.Biên dịch Sass thành CSS.Refesh trình coi ngó auto bất kể bao giờ chúng ta lưu giữ một file.Tối ưu hóa những tài nguim (CSS, JS, fonts, và hình ảnh) mang đến phiên bản production.

quý khách cũng biến thành học cách nối một chuỗi những task khác biệt vào trong 1 lệnh dễ dàng và đơn giản.Hãy bước đầu bằng phương pháp thiết đặt Gulp bên trên máy tính xách tay của chúng ta.

Xem thêm: Em Muốn Hỏi Về Cách Chơi Game Wii Trên Ổ Cứng Gắn Ngoài Hoặc Usb (Kèm Ảnh)

Cài đặt Gulp

quý khách hàng yêu cầu cài đặt Node.js trước lúc hoàn toàn có thể thiết đặt Gulp.

Sau Lúc đang thiết đặt Node, chúng ta có thể setup Gulp bằng cách sử dụng lệnh sau:

$ sudo npm install gulp -gNhững tư tưởng cơ bản bên trên tôi thảm khảo bên trên blog của techmaster https://techmaster.vn/posts/34204/gulp-cho-nguoi-moi-bat-dau (Nguồn Techmaster )

Hướng dẫn dùng gulp nhằm convert từ SCSS to CSS

npm init // This will run through creating the package.json filenpm install -g gulp // If you haven"t installed gulp globally beforenpm install --save-dev gulpnpm install --save-dev gulp-sassTạo gulptệp tin.js nhằm build scss khổng lồ css

var gulp = require("gulp");var sass = require("gulp-sass");gulp.task("styles", function() gulp.src("sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("./css/")));//Watch taskgulp.task("default",function() gulp.watch("sass/**/*.scss",<"styles">););Đây là kết cấu dự án công trình của mình

*

Bây giờ đồng hồ bạn vào tlỗi mục sass , bạn tạo thành tệp tin styles.scss bạn viết mở một đoạn style demo nhỏSau kia các bạn mlàm việc cmd lên bạn chạy lệnh sau

gulp Sau kia các bạn vào tệp tin CSS bạn thấy nó vẫn tự đông build ra tệp tin css cho những bạn

Vậy là ngừng rồi , đây là 1 bài xích gợi ý nhỏ về convert từ bỏ SCSS khổng lồ CSS , mà lại gulp xung quanh bài toán build scss qua css đến bác bỏ các bạn thì nó có thể làm gần như câu hỏi khác ví như build các tệp tin TypeScript lớn JS , và các vấn đề không giống , để hiểu rõ hơn về gulp thì chúng ta lên trang chủ của Gulp nhằm khám phá kĩ rộng về nó .

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *