Gulp压缩那些事

桃扇骨 2022-05-29 10:25 149阅读 0赞

# 前提： #

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

gulp压缩的一般都是js，css，html，image等文件。使用gulp压缩之后代码会更加安全体积会变小。Gulp插件不同所涉猎的功能也不同。[常用的gulp插件][gulp]

# 使用gulp的步骤： #

1. 全局安装gulp ----cnpminstall gulp –g

2. 本地安装gulp ----cnpminstall gulp –save

注：全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。

3. 本地安装gulp插件，

cnpm install gulp-rename  ---重命名文件

cnpm installgulp-uglify    ---压缩js文件

cnpm insallgulp-imagemin  ---压缩图片

cnpm installgulp-htmlmin   ---压缩HTML

cnpm installgulp-minify-css ---压缩css

4. 新建gulpfile.js文件（重要）

//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 less = require('gulp-less'); //定义一个testLess任务（自定义任务名称） gulp.task('testLess', function () { gulp.src('src/less/index.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css(s输出文件夹) }); gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

5.执行gulp任务

gulp testLess

# 成果展示： #

![Image 1][]    ![Image 1][]

感受：

实践出真知。

[gulp]: https://www.jianshu.com/p/98db023b5b89
[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关 gulp：压缩CSS插件——gulp-clean-css

[gulp-clean-css插件介绍][gulp-clean-css] gulp-clean-css插件是[gulp][] plugin to minify CSS,

旧城等待，/ 2022年11月29日 12:22/ 0 赞/ 154 阅读

相关 gitee那些事

1、fatal: remote origin already exists. 错误是因为本地库已经关联了一个名叫 origin的远程库，此时，查看远程库信息： git

末蓝、/ 2022年11月16日 01:36/ 0 赞/ 212 阅读

相关 Linux压缩那些事

简介本文主要介绍互联网上最主流的两种压缩格式（rar和zip）文件在Linux系统上的压缩和解压操作，包括分卷压缩。本文不展开过多详细的命令选项的讲解，只列举实际使用L

素颜马尾好姑娘i/ 2022年09月09日 12:57/ 0 赞/ 242 阅读

相关 Gulp压缩那些事

前提： gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自

桃扇骨/ 2022年05月29日 10:25/ 0 赞/ 150 阅读

相关 CocosCreator和gulp-使用gulp-imagemin压缩图片

在游戏开发中，打包前进行图片压缩是必需工作，gulp内置了很多构建、优化插件，例如：图片压缩、js文件合并等等，这样，在游戏构建过程中，只需一个命令，就可以自动做完所有这些工作

本是古典何须时尚/ 2022年05月14日 02:36/ 0 赞/ 208 阅读

相关缓存那些事

一般而言，现在互联网应用（网站或App）的整体流程，可以概括如图1所示，用户请求从界面（浏览器或App界面）到网络转发、应用服务再到存储（数据库或文件系统），然后返回到界

以你之姓@/ 2022年03月25日 02:48/ 0 赞/ 290 阅读

相关 gulp js压缩gulp-uglify,去除console

var gulp = require('gulp'), uglify = require('gulp-uglify'), rename =

古城微笑少年丶/ 2022年03月11日 15:27/ 0 赞/ 290 阅读

相关 gulp压缩

gulp压缩 gulp安装 gulp插件的安装 gulp压缩代码执行任务 gulp安装 1. 安装gul

朱雀/ 2022年01月30日 06:49/ 0 赞/ 249 阅读

相关监听那些事

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年5月31日在我现在写的这个项目里面，基本上都是有很多表需要用到监听才能获取到另外一

刺骨的言语ヽ痛彻心扉/ 2022年01月22日 13:41/ 0 赞/ 277 阅读

相关 gulp 压缩打包js文件、gulp方法

gulp的方法 gulp.task(str,fn) 创建一个gulp任务 gulp.src(path)

亦凉/ 2021年07月24日 19:21/ 0 赞/ 640 阅读