gulp là gì

Gulp là gì?

Gulp là 1 trong dụng cụ giúp đỡ bạn tự động hóa hóa nhiều task (nhiệm vụ) nhập quy trình cách tân và phát triển trang web. Nó thông thường được dùng nhằm thực hiện những tác vụ front kết thúc như:

• Tạo đi ra một trang web server.
• Reload trình duyệt một cơ hội tự động hóa bất kể lúc nào một tệp tin được lưu.
• Sử dụng những preprocessor tương tự Sass hoặc LESS.
• Tối ưu hóa những khoáng sản như CSS, JavaScript và hình hình họa. Đây ko cần là 1 trong list trọn vẹn về những loại nhưng mà Gulp rất có thể thực hiện. Nếu mong muốn, chúng ta cũng có thể tạo nên một generator trang web site tĩnh. Gulp khôn cùng mạnh mẽ và tự tin, tuy nhiên bạn phải học tập cơ hội dùng Gulp nếu như muốn dẫn đến một vượt lên trước trình (process) của riêng rẽ bản thân. Bài viết lách này tiếp tục giúp đỡ bạn sở hữu những kiến thức và kỹ năng cơ phiên bản về Gulp tiếp sau đó chúng ta cũng có thể tự động bản thân tìm hiểu tất cả. Trước Lúc lên đường sâu sắc nhập Gulp, hãy nói tới nguyên do vì sao các bạn dùng Gulp nhưng mà ko cần những dụng cụ không giống.

Cái tất cả chúng ta tiếp tục làm

Khi kết cổ động nội dung bài viết này, các bạn sẽ sở hữu một workflow triển khai những task sau:

• Tạo đi ra một trang web server.
• Biên dịch Sass trở nên CSS.
• Refesh trình duyệt tự động hóa bất kể lúc nào các bạn lưu một tệp tin.
• Tối ưu hóa những khoáng sản (CSS, JS, fonts, và hình ảnh) mang đến phiên phiên bản production.

Bạn cũng tiếp tục học tập cơ hội nối một chuỗi những task không giống nhau vào trong 1 mệnh lệnh giản dị. Hãy chính thức bằng phương pháp thiết đặt Gulp bên trên PC của công ty.

Cài bịa đặt Gulp

Bạn cần thiết thiết đặt Node.js trước lúc rất có thể thiết đặt Gulp.

Sau Lúc vẫn thiết đặt Node, chúng ta cũng có thể thiết đặt Gulp bằng phương pháp dùng mệnh lệnh sau:

$ sudo npm install gulp -g

Những định nghĩa cơ phiên 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 )

Xem thêm: chi dau em chong

Hướng dẫn người sử dụng gulp nhằm convert kể từ SCSS to tướng CSS

npm init  // This will run rẩy through creating the package.json file
npm install -g gulp  // If you haven't installed gulp globally before
npm install --save-dev gulp
npm install --save-dev gulp-sass

Tạo gulpfile.js nhằm build scss to tướng 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 task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});

Đây là cấu hình dự án công trình của mình

Bây giờ các bạn nhập folder sass , các bạn dẫn đến tệp tin styles.scss các bạn viết lách cởi 1 đoạn style phác họa nhỏ Sau cơ các bạn cởi cmd lên các bạn chạy mệnh lệnh sau

Xem thêm: tuyết rơi đầy nam sơn

gulp 

Sau cơ các bạn nhập tệp tin CSS các bạn thấy nó sẽ bị tự động nhộn nhịp build đi ra tệp tin css cho những bạn

Vậy là xong xuôi rồi , đó là 1 bài xích chỉ dẫn nhỏ về convert kể từ SCSS to tướng CSS , tuy nhiên gulp ngoài những việc build scss qua quýt css mang đến chưng các bạn thì nó rất có thể thực hiện những việc khác ví như build những tệp tin TypeScript to tướng JS , và nhiều yếu tố không giống , nhằm làm rõ rộng lớn về gulp thì chúng ta lên trang chủ của Gulp nhằm lần hiểu kĩ rộng lớn về nó .