Home > Web Front-end > JS Tutorial > Detailed explanation of Grunt compressed images and JS examples

Detailed explanation of Grunt compressed images and JS examples

零下一度
Release: 2017-06-26 10:04:36
Original
1516 people have browsed it

Today we will talk about using Grunt to compress images and JS!

First you need to install the plug-in:

This is for compressing images;

npm install --save-dev gulp-imagemin
Copy after login
Copy after login

This is to compress JS:

npm install --save-dev gulp-imagemin
Copy after login
Copy after login

Then introduce dependencies:

var gulp = require("gulp");

Introducing the plug-in:

  var imagemin = require('gulp-imagemin');//压缩图片
  var uglifyJS = require('gulp-uglify');//压缩JS

//然后 配置任务
Copy after login

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"));
})

//The default registration setting is

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

This is what it looks like after running through !

That’s it! Do you understand?

The above is the detailed content of Detailed explanation of Grunt compressed images and JS examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template