Gulp - Tối ưu hóa CSS và JavaScript

Trong chương này, bạn sẽ học cách tối ưu hóa CSS và JavaScript. Tối ưu hóa là cần thiết để loại bỏ dữ liệu không cần thiết (ví dụ: khoảng trắng và ký tự không sử dụng) khỏi tệp nguồn. Nó làm giảm kích thước của các tệp và cho phép chúng tải nhanh hơn

Cài đặt các plugin để tối ưu hóa CSS và JavaScript

Đi tới thư mục “work” từ dòng lệnh của bạn và cài đặt các plugin “gulp-uglify”, “gulp-minify-css” và “gulp-concat” bằng cách sử dụng lệnh sau:

npm install gulp-uglify gulp-minify-css gulp-concat

Khai báo sự phụ thuộc và tạo nhiệm vụ

Trong tệp cấu hình của bạn gulpfile.js, đầu tiên khai báo các phụ thuộc như được hiển thị trong đoạn mã sau.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Tiếp theo, bạn cần tạo các nhiệm vụ để tối ưu hóa CSS và JavaScript như được hiển thị trong đoạn mã sau.

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

Các js nhiệm vụ sẽ chấp nhận .js tập tin từ src/scripts/thư mục. Nó nối và làm xấujs tệp, sau đó sản xuất build/scripts/script.js tập tin.

Các CSS nhiệm vụ sẽ chấp nhận .css tập tin từ src/styles/thư mục. Nó nối và thu nhỏCSS tệp, sau đó sản xuất build/styles/styles.css tập tin.

Chạy nhiệm vụ

Tệp cấu hình đã được thiết lập và sẵn sàng thực thi. Sử dụng lệnh sau để chạy tác vụ.

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
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs