今天我们来说一下用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. .Net Core 使用swagger UI

    swagger UI 第一步:首先添加包Swashbuckle.AspNetCore (可通过微软添加包命令Install-Package 包名进行添加,也可以通过管理NuGet程序包进行添加) 第二 ...

  2. flask-restful基础

    flask-restful基本使用 基本使用 from flask_restful import Api,Resource,reqparse,inputs from flask import Flas ...

  3. 蠕虫Worm virus

    美国CORNELL大学研究生莫里斯编写的蠕虫病毒 蠕虫病毒是一种常见的计算机病毒.它是利用网络进行复制和传播,传染途径是通过网络和电子邮件.最初的蠕虫病毒定义是因为在DOS环境下,病毒发作时会在屏幕上 ...

  4. HDU_1028 Ignatius and the Princess III 【母函数的应用之整数拆分】

    题目: "Well, it seems the first problem is too easy. I will let you know how foolish you are late ...

  5. POJ_2407 Relatives 【欧拉函数裸题】

    一.题目 Given n, a positive integer, how many positive integers less than n are relatively prime to n? ...

  6. python re模块 collections模块

    根据手机号码一共11位并且是只以13.14.15.18开头的数字这些特点,我们用python写了如下代码: while True: phone_number = input('please input ...

  7. 解决nginx文件服务器访问403

    2018-10-24 nginx配置文件目录服务器 修改/etc/nginx/conf.d/default.conf或者在/etc/nginx/conf.d/目录下添加一配置文件,如下 server ...

  8. css display flew 伸缩盒模型

    父级容器属 <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  9. Mina初识

    1.概述 1.1 Apache的顶级项目,基于java NIO,支持TCP/IP.UDP/IP: 1.2 Mina对外屏蔽了java NIO使用的复杂性,并在性能上做了不少的优化: 1.3 Mina采 ...

  10. CenctOS6 and CenctOS7 多种姿势解决忘记密码

    -----linux---- 忘记密码啦!!! 忘记密码教程!!! 教你们忘记密码(我原来密码就是123456,忘记是不可能的!假装忘记的样子 0.0) 现在我们忘记密码了!对忘记密码了.我忘记密码了 ...