今天我们来说一下用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. 使用@符号让C#中的保留字做变量名的方法详解

    原来还有一种办法就是加@符号(看了@符号的作用又多了一个): 复制代码代码如下: class @int    {        static void Main(string[] args)      ...

  2. ansible基本模块-command

  3. 1076 Wifi密码 (15 分)

    // 思路是网上以一位大神的,特简单直接采用字符串,判断长度,还有最后一个元素是否T,便可通过ASCll输出数字:#include <iostream> #include <stri ...

  4. Docker镜像的导出和载入

    https://www.cnblogs.com/lishidefengchen/p/10564765.html

  5. 【算法笔记】B1016 部分A+B

    1016 部分A+B (15 分) 正整数 A 的“D​A​​(为 1 位整数)部分”定义为由 A 中所有 D​A​​ 组成的新整数 P​A​​.例如:给定 A=3862767,D​A​​=6,则 A ...

  6. Oracle之UTL_FILE 包用法详解

    [转自] http://zhangzhongjie.iteye.com/blog/1903024 UTL_FILE包可以用来读写操作系统上的文本文件,UTL_FILE提供了在客户端(FORM等等)和服 ...

  7. SQL中的正则表达式

    [转自] http://blog.csdn.net/weiwenhp/article/details/6943834 当我们要进行一些简单的糊涂查询时用百分号(%),通配符(_)就可以了.其中%表达任 ...

  8. Mercurial stuck “waiting for lock”, tortoisehg pull版本卡住在等待 解决办法

    最近使用hg的时候,拖取版本一直卡住不动.报错类似waiting for lock on working directory of xxxx held by ''. 原本以为是网络不好或者hg安装有问 ...

  9. 红米note_维修_开机键

    1. 2.在线人工客服(20180919) 很荣幸为您服务,有什么问题可以帮助到您的- 我的手机 后边的 开机键 貌似 不太行了 您好,您是哪款手机 就是 要按 好几次 很用力 才能 开亮手机屏幕木 ...

  10. pandas 多列排序

    import pandas as pd df = pd.DataFrame({'AAA' : [1,2,1,3], 'BBB' : [1,1,2,2], 'CCC' : [2,1,3,1]}) sou ...