Categories
Gulp教程

Gulp-优化CSS和JavaScript

Gulp-优化CSS和JavaScript


在本章中,您将学习如何优化CSS和JavaScript。需要进行优化以从源文件中删除不必要的数据(例如,空格和未使用的字符)。它减小了文件的大小,并允许它们更快地加载

安装插件以优化CSS和JavaScript

从命令行转到“工作”目录,并使用以下命令安装“ 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
蜀ICP备20006366号
error: 内容受到保护 !!