Gulp - Kết hợp Nhiệm vụ

Task cho phép một cách tiếp cận mô-đun để cấu hình Gulp. Chúng tôi cần tạo tác vụ cho từng phần phụ thuộc, chúng tôi sẽ thêm tác vụ này khi chúng tôi tìm và cài đặt các plugin khác. Nhiệm vụ Gulp sẽ có cấu trúc sau:

gulp.task('task-name', function() {
   //do stuff here
});

Trong đó “task-name” là tên chuỗi và “function ()” thực hiện nhiệm vụ của bạn. “Gulp.task” đăng ký chức năng như một tác vụ trong tên và chỉ định các phần phụ thuộc vào các tác vụ khác.

Cài đặt Plugin

Hãy sử dụng một plugin có tên là minify-cssđể hợp nhất và rút gọn tất cả các tập lệnh CSS. Nó có thể được cài đặt bằng cách sử dụng npm như được hiển thị trong lệnh sau:

npm install gulp-minify-css --save-dev

Để làm việc với “plugin gulp-minify-css”, bạn cần cài đặt một plugin khác có tên “gulp-autoprefixer” như được hiển thị trong lệnh sau:

npm install gulp-autoprefixer --save-dev

Để nối các tệp CSS, hãy cài đặt gulp-concat như được hiển thị trong lệnh sau:

npm install gulp-concat --save-dev

Sau khi cài đặt plugin, bạn cần viết các phụ thuộc vào tệp cấu hình của mình như sau:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Thêm tác vụ vào tệp Gulp

Chúng tôi cần tạo tác vụ cho từng phụ thuộc, chúng tôi sẽ thêm tác vụ này khi cài đặt các plugin. Nhiệm vụ Gulp sẽ có cấu trúc sau:

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Plugin 'concat' nối các tệp CSS và plugin 'autoprefix' cho biết phiên bản hiện tại và phiên bản trước của tất cả các trình duyệt. Nó thu nhỏ tất cả các tập lệnh CSS từ thư mục src và sao chép vào thư mục xây dựng bằng cách gọi phương thức 'dest' với một đối số, đại diện cho thư mục đích.

Để chạy tác vụ, hãy sử dụng lệnh sau trong thư mục dự án của bạn:

gulp styles

Tương tự, chúng tôi sẽ sử dụng một plugin khác có tên là 'gulp-imagemin' để nén tệp hình ảnh, có thể được cài đặt bằng lệnh sau:

npm install gulp-imagemin --save-dev

Bạn có thể thêm các phần phụ thuộc vào tệp cấu hình của mình bằng lệnh sau:

var imagemin = require('gulp-imagemin');

Bạn có thể tạo tác vụ cho phần phụ thuộc đã xác định ở trên như được hiển thị trong đoạn mã sau.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Các hình ảnh được đặt trong “src / images / ** / *” được lưu trong img_srcobject. Nó được chuyển đến các hàm khác được tạo bởi hàm tạo 'imagemin'. Nó nén các hình ảnh từ thư mục src và sao chép vào thư mục xây dựng bằng cách gọi phương thức 'dest' với một đối số, đại diện cho thư mục đích.

Để chạy tác vụ, hãy sử dụng lệnh sau trong thư mục dự án của bạn:

gulp imagemin

Kết hợp nhiều nhiệm vụ

Bạn có thể chạy nhiều tác vụ cùng một lúc bằng cách tạo tác vụ mặc định trong tệp cấu hình như được hiển thị trong đoạn mã sau:

gulp.task('default', ['imagemin', 'styles'], function() {

});

Tập tin Gulp đã được thiết lập và sẵn sàng thực thi. Chạy lệnh sau trong thư mục dự án của bạn để chạy các tác vụ kết hợp ở trên:

gulp

Khi chạy tác vụ bằng lệnh trên, bạn sẽ nhận được kết quả sau trong dấu nhắc lệnh:

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images