gulp在项目中的使用

冷不防 2022-09-21 13:26 184阅读 0赞

在之前的文章中，已经详细的讲述了怎么安装gulp，它的工作过程，然后现在来谈谈项目中的具体使用。  
**入门教程**  
[http://blog.csdn.net/liuwengai/article/details/51729547][http_blog.csdn.net_liuwengai_article_details_51729547]

**使用教程**

**使用gulp-htmlmin**

压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

1.**全局和项目都安装好gulp之后，安装一下htmlmin插件。**

npm install gulp-htmlmin --save-dev

2.**配置gulpfile**

![这里写图片描述][20160622143129796]

**参数解释：**  
require 加载gulp和gulp-htmlmin模块

![这里写图片描述][20160622143315027]

src是要处理的文件，lemonhotel下的所有html文件  
htmlmin(options)是使用上面指定的参数来压缩文件  
gulp.dest指定了文件的处理完成后保存的位置，html文件名跟之前的相同，存放在html/build文件夹中。  
**3.运行**  
![这里写图片描述][20160622143812486]

testhtmlmin是指定的任务名称。

**4 压缩前后对比图：**  
![这里写图片描述][20160622144450248]

![这里写图片描述][20160622144618333]

未完，待更新。。。。

[http_blog.csdn.net_liuwengai_article_details_51729547]: http://blog.csdn.net/liuwengai/article/details/51729547
[20160622143129796]: /images/20220721/8502e322799b41f692e1f638b2a5f796.png
[20160622143315027]: /images/20220721/4496be6ca7af4cb99f52f97f7c7fbedc.png
[20160622143812486]: /images/20220721/d2911c2ffb424b8bb060b4105fda3dcc.png
[20160622144450248]: /images/20220721/d065eced39264d59975e10c554756033.png
[20160622144618333]: /images/20220721/15a384e9615d4d7b97acd65455cfe7af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关使用gulp来构建项目

gulp是一个前端构建的工具，用来快速进行一些操作。比如开发一个项目的时候，设计师给你的照片一般都是一个高清的图，但是这些资源往往是很大的。那你要压缩图片的话是不是要找一

我就是我/ 2023年01月19日 07:06/ 0 赞/ 27 阅读

相关 gulp的使用教程

gulp是一个前端自动化构建工具，通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。全局安装 npm install --glo

浅浅的花香味﹌/ 2022年09月27日 13:29/ 0 赞/ 232 阅读

相关 gulp在项目中的使用

在之前的文章中，已经详细的讲述了怎么安装gulp，它的工作过程，然后现在来谈谈项目中的具体使用。入门教程 [http://blog.csdn.net/liuwenga

冷不防/ 2022年09月21日 13:26/ 0 赞/ 185 阅读

相关 gulp自动化任务脚本在HybridApp开发中的使用

目前做前端开发的同学可能都熟悉grunt，fis之类的自动化构建工具，其实在HybridApp开发中我们也可以使用这些工具来简化我们的工作，gulp就是一个比gru

川长思鸟来/ 2022年08月24日 00:55/ 0 赞/ 223 阅读

相关 gulp工具的使用

gulp 多个开发者共同开发一个项目，每位开发者负责不同的模块，这就会造成一个完整的项目实际上是由许多的“代码版段”组成的；使用le

拼搏现实的明天。/ 2022年06月13日 02:42/ 0 赞/ 288 阅读

相关 gulp 使用

1、安装node.js 2、全局安装 gulp npm install --global gulp 3、进入文件局部安装 gulp npm

傷城~/ 2022年05月24日 07:24/ 0 赞/ 211 阅读

相关使用Gulp打包ionic1项目

关于Gulp Gulp是一个前端的自动化构建工具，做前端的同学应该都知道。比如之前的Grunt，以及现在流行的Webpack。但是作为一个从做原生（Native APP

Love The Way You Lie/ 2022年05月22日 04:49/ 0 赞/ 306 阅读

相关什么是Gulp？如何使用Gulp

什么是Gulp？如何使用Gulp Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可

淡淡的烟草味﹌/ 2022年05月14日 01:30/ 0 赞/ 386 阅读

相关 gulp的基本使用

1 cnpm i gulp -D 2 cnpm i node-sass gulp-sass -D 3 cnpm i gulp-clean-css gulp-rename

约定不等于承诺〃/ 2022年02月26日 17:16/ 0 赞/ 251 阅读

相关使用gulp构建一个项目

使用gulp构建一个项目（转载：[https://blog.csdn.net/zchcode/article/details/51556699][https_blog.

绝地灬酷狼/ 2021年09月30日 00:18/ 0 赞/ 569 阅读