Gulp自动化工具之图片压缩

一、安装node

https://nodejs.org/download/

根据需要选择对应的版本

 

安装好了之后可以通过node -v参看一下版本

node -v

二、安装gulp

npm install -g gulp

 

进入项目目录

由于已经全局安装了gulp

(但是要保证全局版本与本地版本一致。最好重新安装一下

npm install --save-dev gulp

安装好了之后

gulp –v

全局gulp与本项目下的gulp版本一致了。

三、安装插件

npm install --save-dev gulp-jshint

npm install --save-dev gulp-uglify

npm install --save-dev gulp-concat

npm install --save-dev gulp-sass

npm install --save-dev gulp-rename

npm install --save-dev gulp-imagemin

npm install --save-dev imagemin-pngquant

 

安装好了之后运根据配置文件执行任务(也可以设置默认任务)

下面我们来执行图片压缩任务

gulp libs:imagemin

当看到这里是我们的图片压缩任务已经完成了。

参考链接:

http://javascript.ruanyifeng.com/tool/gulp.html

https://github.com/gulpjs/gulp

http://gulpjs.com/plugins/

http://javascript.ruanyifeng.com/tool/gulp.html

http://www.tuicool.com/articles/ea6FVf

http://markpop.github.io/2014/09/17/Gulp入门教程/

http://gulpjs.com/plugins/

http://www.zhixing123.cn/computer/gulp.html

http://sentsin.com/web/861.html

时间: 2024-10-18 09:14:19

Gulp自动化工具之图片压缩的相关文章

一:Java使用google的thumbnailator工具对图片压缩水印等做处理

Thumbnailator是一个非常好的图片开源工具 使用方法: 在pom中加入以下jar包 <!-- 图片缩略图 图片压缩 水印 start--> <dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><version>0.4.8</version></dependency><!-- 图

【gulp】前端自动化工具---gulp的使用(一)------【凡尘】

什么是gulp?   基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文件需要压缩 002.gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... 003.怎么安装gulp? 因为它基于nodeJS,因此需要先安装node环境 安装完成后,打开你的命令行窗口 输入: node -v 检测

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

Gulp 自动化的项目构建工具

在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部署文件生成,并监听文件在改动后重复指定的这些步骤. 得益于 Grunt 基于任务的设计模式,这些步骤可以很好的归类执行,让开发效率得到了一次提升,但杀敌 1000,得自损 800 啊,学习曲线有点高,Gruntfile配置任务很难理解,经常容易忘记. Grunt.js 太复杂了,复杂到比使用和配置

做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

gulp自动化构建工具

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/

基于Node.js的自动化工具Gulp

基于Node.js的自动化工具Gulp What is gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript.coffee.sass.less.html/image.css 等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部

图片压缩的在线好工具

上周日参加了前端圈的一个走进名企腾讯专场的活动,在会议上有分享嘉宾谈到一个图片的压缩网址,当时也并未太放在心上,没想到本周就接了一个新项目,里面用到的图片都是那种大图,PNG居多,而领导又再三强调一定要保证网页的加载速度,当时就想到那次活动上分享的一个在线压缩工具,于是百度一搜图片压缩工具,发现一个在线图片压缩软件https://tinypng.com/,抱着试试的心态,上传了一张图片开始进行压缩,竟然图片小了一半多,而且图片质量损耗也不明显,果断把用到的图片都往上压了一次,同时发现这个工具对于

图片压缩java工具类

package com.net.util; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import org