linux使用gulp压缩图片,从零开始用gulp

骑猪看日落 2022-10-20 13:35 281阅读 0赞

gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的，grunt gulp fis3等等。

这个鬼东西有什么用？请参考https://www.zhihu.com/question/35595198

为什么选择gulp,因为使用非常简单，学习成本低。以后想用别的工具再转去学也不难。

自动化构建工具都没用过的前端，何以谈人生？

以下是正题：

1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网，根据自身的环境(windows linux mac)下载安装包(msi)。直接进行傻瓜式安装。

2.安装完node后开始全局安装gulp,在命令行输入命令,安装成功后就可以在命令行输入gulp相关的命令了，例如gulp -v查看当前版本号。(npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试)

3.在项目中安装，安装成功后就可以开始写配置文件了。

4.在项目根目录中创建文件  gulpfile.js

以下是简单的gulpfile.js  demo代码

代码这种东西一开始不会写，就先抄，抄着抄着就懂怎么写了。

插件

var paths = \['./css/\*.less'\];　　//定义一个数组，指定文件路径

//下面开始编写一个任务

//less编译任务

gulp.task('less',function() \{ //创建一个gulp任务，任务名字是'less'，然后一个回调函数

return gulp.src(paths)　　　　//gulp任务操作的源文件'paths'

.pipe(less()) //执行less编译

.pipe(gulp.dest('./css')); //gulp任务输出的新文件

\});

//watch监听任务

gulp.task('watch',function()\{ //创建第二个gulp任务，任务名字是‘watch',然后一个回调函数

gulp.watch(paths,\['less'\]); //gulp的watch监听，文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/

\});

//gulp.watch('default',\['less'\]);

gulp.task('default',\['less','watch'\]);　　//gulp的default任务，相当于glup的执行入口。然后把less任务和watch放进来，该脚本就会执行这两个任务

把以上代码写入gulpfile.js 后保存，然后项目根路径下执行命令

gulp

就开始执行gulp完成你安排的任务。

日常开发中需要gulp做的有很多如合并文件(gulp-concat)压缩(gulp-uglify)

这就需要自己编写task来让gulp来执行。

最后总结一下，写好一个gulpfile.js很简单，结合demo代码和下面五个命令

函数

gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告，这样的情况下我们可以用start代替

gulp.watch(glob,fn//)当glob内容发生改变时，执行fn

gulp.src(glob)//返回一个可读的stream

gulp.dest(glob)//返回一个可写的stream

需要更多的说明或者操作可以去下面的网站逛一逛

调用

一、压缩css

插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss',function() \{ return gulp.src('src/css/\*.css') //压缩的文件 .pipe(minifycss()) //执行压缩 .pipe(gulp.dest('dst/css')); //输出文件夹\});

二、压缩js

插件，需npm install --save-dev xxxxxx

gulp.task('minifyjs',function() \{

文件

.pipe(concat('main.js'))

.pipe(gulp.dest('minified/js')) //输出main.js到文件夹

.pipe(rename(\{suffix: '.min'\})) //rename压缩后的文件名

.pipe(uglify()) //压缩

.pipe(gulp.dest('minified/js')); //输出

\});

发表评论取消回复

表情：

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

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

相关阅读

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

相关 Gulp初学体会，从零安装并使用Gulp压缩css、js、html、图片

初识Gulp 作为一个PHP程序员，在小的外包公司中经常要做一些小型的内容管理系统。而在这个时候非常迫切的想要一套集成好的H5后台管理系统模板。原本一直在基于[Layui

约定不等于承诺〃/ 2022年11月19日 09:57/ 0 赞/ 249 阅读

相关 linux使用gulp压缩图片,从零开始用gulp

gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的，grunt gulp fis3等等。这个鬼东西有什么用？请参考https://www.zhihu.c

骑猪看日落/ 2022年10月20日 13:35/ 0 赞/ 282 阅读

相关 Gulp压缩那些事

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

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

相关 CocosCreator和gulp-使用tinypng批量压缩图片

上篇文章介绍了如何用gulp-imagemin插件来自动批量压缩CocosCreator项目的图片资源，imagemin虽然使用方便且免费，但缺点也很明显，就是耗时长而且压缩比

柔情只为你懂/ 2022年05月14日 03:26/ 0 赞/ 461 阅读

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

相关 gulp 压缩打包css、html和图片

1、压缩打包css文件 (1)cnpm install -D gulp-minify-css (2)在gulpfile.js

你的名字/ 2021年07月24日 23:30/ 0 赞/ 619 阅读

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

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

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