Gulp 优化基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
在本章中,您将学习如何优化 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