使用Gulp压缩HTML,CSS,JavaScript文件

个人博客:

https://wawyw.github.io/

所用资料均来自于互联网，在此致以万分感谢。此处仅作记录和备份，如有侵权或错误，请联系删除，修改。

1、前言

Gulp 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。

• 搭建web服务器
• 文件保存时自动重载浏览器
• 使用预处理器如Sass、LESS
• 优化资源，比如压缩CSS、JavaScript、压缩图片

当然Gulp能做的远不止这些。这里也只是简单利用它来压缩html,css,js文件，一定程度上减缓站点加载过慢的问题。

2、Gulp的安装

首先确保已经正确安装了node.js环境，然后以全局方式安装gulp：

npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install --save-dev gulp  // --save-dev用于把gulp写进项目package.json文件的依赖中

3、Gulp的使用

3.1、建立gulpfile.js文件

在项目根目录下新建一个文件名为gulpfile.js的文件，之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是这次的 gulpfile.js 文件

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var htmlminify = require('gulp-html-minify');

// 压缩js
gulp.task('minify-js', function(){
       
 return gulp.src('./*.js') 
 .pipe(uglify())
 .pipe(gulp.dest('./')) 
});

// 压缩css
gulp.task('minify-css', function(){
     
 return gulp.src('./*.css')
 .pipe(minifyCSS())
 .pipe(gulp.dest('./'))
});

// 压缩html
gulp.task('minify-html', function(){
     
    return gulp.src('./*.html')
    .pipe(htmlminify())
    .pipe(gulp.dest('./'))
});

API

• gulp.task(‘name’, function(){}) 定义任务
• gulp.src(‘path’) 从该路径读取要被压缩的文件
• gulp.dest(‘path’) 把压缩后的文件写入该路径

3.2、安装gulp插件

这里需要安装

• gulp-uglify 用于压缩js文件大小
• gulp-minify-css 用于压缩css文件大小。
• gulp-html-minify 用于压缩html文件大小。

3.3、运行gulp任务

插件安装完成后,使用 gulp 后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。

gulp task_name

4、Gulp使用前后

压缩前

压缩中

压缩后

这里初次窥见了gulp的强大~~

5、结语

gulp的功能还有很多，也十分便捷高效。此番小试牛刀，更待日后探索。。。

6、参考资料

[1] gulp 及其常用插件

[2] 前端构建工具gulpjs的使用介绍及技巧

[3] Gulp新手入门教程