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 任務將接受 src/scripts/ 資料夾中的 .js 檔案。它合併並將醜化 js 檔案，然後生成 build/scripts/script.js 檔案。

CSS 任務將接受 src/styles/ 資料夾中的 .css 檔案。它合併並將壓縮 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