今天我们来说一下用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压缩图片的更多相关文章

  1. Grunt压缩图片和JS

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

  2. 初学grunt压缩

    初学grunt 压缩,做个记录.备忘. [JS压缩] 先比较yui compressor 与 uglify  代码压缩, yui compressor,使用起来很简单.需要jdk. https://g ...

  3. Grunt压缩HTML和CSS

    我的小伙伴们!我明明 在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建 ...

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

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

  5. iOS学习-压缩图片(改变图片的宽高)

    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...

  6. Android压缩图片到100K以下并保持不失真的高效方法

    前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...

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

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

  8. Android 高清加载巨图方案 拒绝压缩图片

    Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...

  9. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

随机推荐

  1. Python全栈之路-Day31

    1 反射 反射的精髓是通过字符串去获取对象属性的值 1.1 基于类和对象反射的属性 #!/usr/bin/env python # __Author__: "wanyongzhen" ...

  2. css优先级之特殊性

    在前端开发的时候,css构建样式规则,这个时候我们会遇到一个问题:当我们对同一个元素做多个样式规则,其中发生了冲突的时候,css是如何选择最终呈现的样式 如下: div{ color:red; } d ...

  3. Java AOP (1) compile time weaving 【Java 切面编程 (1) 编译期织入】

    According to wikipedia  aspect-oriented programming (AOP) is a programming paradigm that aims to inc ...

  4. fread读入优化,寻找速度极限

    序: 在之前的测试中,我们比较了四种读入方式,发现使用读入优化是最快的选择,但是我们知道fread()是比它更快的方法.这一次,我们对比四种读入优化,探寻C++读取速度的极限. 分别是getchar( ...

  5. python基本语法-函数与异常

    # -*- coding: utf-8 -*- #自定义函数 ''' def functionname( parameters ): "函数_文档字符串" function_sui ...

  6. Java中的StringTokenizer类

    /*//在java.util中的StringTokenizer类可以分析一个字符串并将字符串分解成可被独立使用的单词//1.StringTokenizer(String s)-----------为字 ...

  7. linux文件系统下的特殊权限

    SUID, SGID, Sticky 1 权限 r, w, x user, group, other 2 安全上下文 前提:进程有属主和属组:文件有属主和属组: (1) 任何一个可执行程序文件能不能启 ...

  8. centOS7下安装GUI图形界面

    1.如何在centOS7下安装GUI图形界面 当你安装centOS7服务器版本的时候,系统默认是不会安装GUI的图形界面程序,这个需要手动安装CentOS7 Gnome GUI包. 2.在系统下使用命 ...

  9. Redis学习-Set

    在Redis中,Set类型是没有排序的字符集合,和List类型一样,可以在该类型的数据值上执行添加.删除或判断某一元素是否存在等操作.需要说明的是,这些操作的时间复杂度为O(1),即常量时间内完成次操 ...

  10. 一个简单易用的容器管理平台-Humpback

    什么是Humpback? 在回答这个问题前,我们得先了解下什么的 Docker(哦,现在叫 Moby,文中还是继续称 Docker). 在 Docker-百度百科 中,对 Docker 已经解释得很清 ...