Gulp压缩那些事

桃扇骨 2022-05-29 10:25 254阅读 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 条评论，254人围观）

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

相关阅读

相关工作那些事

如何成为职场老司机新的出发控制好自己的情绪沟通很重要自律很重要如果陷入困境新的出发当你步

「爱情、让人受尽委屈。」/ 2022年12月18日 02:57/ 0 赞/ 195 阅读

相关 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 赞/ 249 阅读

相关 Linux压缩那些事

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

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

相关手机那些事

米老师教导我们要隔一段时间就换一个密码这样的话可以保证自己隐私的安全。于是我就谨遵师命，把手机的屏保密码换了一个解锁密码。悲剧的事情来了，我的脑子太笨了，早上还能解锁下午就给忘

亦凉/ 2022年08月27日 06:54/ 0 赞/ 282 阅读

相关 Gulp压缩那些事

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

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

相关二进制那些事

[理清字符集和字符编码关系][Link 1]中介绍到计算机内部由集成电路决定了计算机的信息只能用二进制数处理。本期将介绍二进制那些事。移位运算移位运算指的是将二进制

不念不忘少年蓝@/ 2022年05月26日 05:24/ 0 赞/ 224 阅读

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

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

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

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

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

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

相关 gulp压缩

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

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

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

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

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