Gulp là gì?

Gulp là 1 khí cụ giúp đỡ bạn auto hóa các task (nhiệm vụ) trong quá trình phát triển website. Nó thường được thực hiện để làm những tác vụ front end như:

Tạo ra một web server.Reload trình chuyên chú một giải pháp tự động hóa bất cứ lúc nào một file được lưu lại.Sử dụng những preprocessor giống hệt như Sass hoặc LESS.Tối ưu hóa những tài nguyên ổn như CSS, JavaScript và hình ảnh.Đây chưa hẳn là một danh sách trọn vẹn về rất nhiều sản phẩm công nghệ nhưng Gulp rất có thể làm cho. Nếu muốn, chúng ta cũng có thể tạo ra một generator website site tĩnh. Gulp rất là mạnh mẽ, tuy nhiên bạn cần học cách áp dụng Gulp nếu còn muốn tạo ra một quy trình (process) của riêng rẽ mình.Bài viết này sẽ giúp bạn bao hàm kỹ năng cơ bản về Gulp tiếp nối bạn có thể từ mình khám phá số đông thứ.Trước Lúc đi sâu vào Gulp, hãy nói đến nguyên do tại sao chúng ta áp dụng Gulp nhưng mà chưa hẳn các phương tiện khác.

Bạn đang xem: Gulp cho người mới bắt đầu

Cái chúng ta đang làm

Khi chấm dứt bài viết này, các bạn sẽ có một workflow triển khai các task sau:

Tạo ra một web VPS.Biên dịch Sass thành CSS.Refesh trình ưng chuẩn tự động hóa bất cứ lúc nào chúng ta lưu giữ một tệp tin.Tối ưu hóa những tài nguyên (CSS, JS, fonts, cùng hình ảnh) mang lại phiên bạn dạng production.

Quý Khách cũng sẽ học tập biện pháp nối một chuỗi các task khác nhau vào một lệnh dễ dàng.Hãy bắt đầu bằng phương pháp cài đặt Gulp bên trên máy tính xách tay của người tiêu dùng.

Xem thêm: Lễ Hội Cao Lỗ Là Ai - Tướng Quân Cao Lỗ : Bước Ra Từ Huyền Sử

Cài đặt Gulp

Quý Khách cần thiết lập Node.js trước lúc có thể thiết đặt Gulp.

Sau lúc đang cài đặt Node, chúng ta có thể setup Gulp bằng phương pháp thực hiện lệnh sau:

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

Hướng dẫn sử 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 để 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à cấu trúc dự án công trình của mình

*

Bây tiếng chúng ta vào thỏng mục sass , các bạn tạo thành file styles.scss các bạn viết mở 1 đoạn style kiểm tra nhỏSau kia các bạn msinh hoạt cmd lên chúng ta chạy lệnh sau

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

Vậy là xong xuôi rồi , đấy là 1 bài xích chỉ dẫn nhỏ dại về convert từ SCSS lớn CSS , nhưng mà gulp không tính vấn đề build scss qua css mang đến bác bỏ các bạn thì nó có thể có tác dụng hầu hết câu hỏi khác ví như build các file TypeScript to lớn JS , và những sự việc không giống , để hiểu rõ rộng về gulp thì chúng ta lên Home của Gulp nhằm tò mò 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 *