Gulp - การเพิ่มประสิทธิภาพ CSS และ JavaScript

ในบทนี้คุณจะได้เรียนรู้วิธีเพิ่มประสิทธิภาพ CSS และ JavaScript จำเป็นต้องมีการปรับให้เหมาะสมเพื่อลบข้อมูลที่ไม่จำเป็น (เช่นช่องว่างและอักขระที่ไม่ได้ใช้) ออกจากไฟล์ต้นฉบับ จะลดขนาดของไฟล์และช่วยให้โหลดได้เร็วขึ้น

ติดตั้งปลั๊กอินเพื่อเพิ่มประสิทธิภาพ CSS และ JavaScript

ไปที่ไดเร็กทอรี“ work” จากบรรทัดคำสั่งของคุณและติดตั้งปลั๊กอิน“ gulp-uglify”,“ gulp-minify-css” และ“ gulp-concat” โดยใช้คำสั่งต่อไปนี้ -

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

ประกาศการพึ่งพาและสร้างงาน

ในไฟล์กำหนดค่าของคุณ gulpfile.jsอันดับแรกประกาศการอ้างอิงตามที่แสดงในรหัสต่อไปนี้

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

จากนั้นคุณต้องสร้างงานเพื่อเพิ่มประสิทธิภาพ CSS และ JavaScript ดังที่แสดงในโค้ดต่อไปนี้

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(){
});

js งานจะยอมรับ .js ไฟล์จาก src/scripts/โฟลเดอร์ มันเชื่อมต่อและอัปลักษณ์ไฟล์js แล้วสร้างไฟล์ build/scripts/script.js ไฟล์.

CSS งานจะยอมรับ .css ไฟล์จาก src/styles/โฟลเดอร์ มันเชื่อมต่อและลดขนาดCSS แล้วสร้างไฟล์ build/styles/styles.css ไฟล์.

เรียกใช้งาน

ไฟล์คอนฟิกูเรชันได้รับการตั้งค่าและพร้อมที่จะดำเนินการ ใช้คำสั่งต่อไปนี้เพื่อรันงาน

gulp

ในการรันงานโดยใช้คำสั่งด้านบนคุณจะได้รับผลลัพธ์ต่อไปนี้ในพรอมต์คำสั่ง

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