今天我们来说一下用Grunt来压缩图片和JS吧!

首先要安装插件:

这是压缩图片的;

npm install --save-dev gulp-imagemin

 这是压缩JS的:

npm install --save-dev gulp-imagemin

  然后引入依赖:

var gulp = require("gulp");

在引入插件:

  var imagemin = require('gulp-imagemin');//压缩图片
var uglifyJS = require('gulp-uglify');//压缩JS //然后 配置任务

gulp.task('uglifyJS',function(){
  gulp.src('js/sum.js')
  .pipe(uglifyJS())
  .pipe(gulp.dest('dest'));
});

gulp.task('imagemin',function(){
  gulp.src('img/*.{jpg,png,gif}')
  .pipe(imagemin())
  .pipe(gulp.dest("dest"));
})

//最后注册设置默认

gulp.task('default',['uglifyJS','imagemin']);

跑通之后就是这个样子的!

就是这样!大家懂了吗?

Grunt压缩图片和JS的更多相关文章

  1. Grunt压缩图片

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  2. 推荐一个用于压缩图片的JS插件:localResizeIMG

    惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来 ...

  3. 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

    很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...

  4. grunt压缩多个js文件和css文件

    压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 ...

  5. 处理页面载入图片js(等比例压缩图片)

    第一页面html  <div class="admin">${answer.content}</div> <div class="admin ...

  6. Gulp压缩前端CS,JS,图片文件

    Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...

  7. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  8. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  9. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

随机推荐

  1. docker加速器配置

    我使用docker的原因 最近自己一直在强迫自己使用docker,一方面是docker的容器化服务,使得每一个配置相互独立,易于维护.而且如果到后面如果深入了的话,通过自己编写dockerfile,那 ...

  2. js 三大事件(鼠标.键盘.浏览器)

    鼠标事件: click:单击 dblclick:双击 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮(进入) mouseout:鼠标离开(离开) mousemov ...

  3. C#中实现https的双向认证

    1.  把浏览器中的证书导出为cer文件. 2.   代码如下: using System; using System.Net; using System.IO; using System.Secur ...

  4. jeesite模块解析,功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...

  5. C++_新特性2-RTTI运行阶段类型识别

    这部分属于C++的新特性,感觉比较高阶的特性.我把它归于属于奇技淫巧的范畴.了解即可. RTTI是运行阶段类型识别(Runtime Type Identification)的简称. 这是添加到C++中 ...

  6. MySQL 安装 linux ,window 傻瓜版

    现在作为服务器操作系统的一般有三种,Windows Server,Linux,Unix,在这里我们只介绍在windows下和linux下安装mysql,Unix下安装应该和linux差不多. Wind ...

  7. POJ - 1080 枚举 / DP

    要求max{F/P},先枚举下界lowf,再贪心求符合约束条件的n个最小价值和 记录F的离散值和去重可以大幅度常数优化 (本来想着用DP做的) (辣鸡POJ连auto都Complie Error) # ...

  8. C++ GUI Qt4编程(04)-2.1findDialog

    finddialog.h /* * 未实现findNextSignal和findPreviousSignal */ #ifndef FINDDIALOG_H #define FINDDIALOG_H ...

  9. get 与 post 区别

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  10. linux 入门命令总结

    1,tree -d /etc/ 参数表示只显示目录 -f 显示内容的完整 -i 不显示树枝显示完整路径2,mkdir -p 递归创建多级目录 -v 显示创建目录的过程 -m 设置目录的默认权限 mkd ...