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