node图片压缩-gulp压缩整站方法（html/css/js/image）

原创：96作图 2023-04-11 03:29:31

怎么用JavaScript在线压缩图片

主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下,随着表单提交。

照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。

<!DOCTYPE html>

<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0."></script> <script type="text/javascript" src="js/"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = (id); // (filebtn); // var files = ; // (); // (files); var files = ; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. = (function(theFile) { return function(e) { // Render thumbnail. // ([0]); // (e.target); (e.); var i = ("test"); i.src = ; ($(i).width()); ($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); ($(i).width()); ($(i).height()); var quality = 50; i.src = (i,quality).src; (i.src); i. = "block"; }; })(f); // Read in the image file as a data URL. (f); } } ('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>

Nodejs之gulp用法总结

一、nodeJS基础操作

(一)、安装nodeJS (node -v)

(二)、npm 包管理工具 (cnpm安装 : npm install gulp -g)

(三)、在项目中初始化 (nodejs的配置文件,在项目中安装的模块,会记录在) npm init

(四)、在其他位置需要配置相关模块时,只需把拷贝过来,执行 npm install,即可自动安装所需模块

二、gulp

1. 安装 (gulp -v)

(1)全局安装 npm i gulp -g

(2)本地安装: npm i gulp --save-dev

2. 在项目根目录创建

3. () () () () ()

4. gulp插件: (1)压缩css (2)压缩js (3) 合并js (4) 压缩图片 (5)自动添加前缀 autoprefixer (6)sass编译 (7)热刷新

gulp压缩整站方法（html/css/js/image）

注入(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装:

npm install gulp-uglify --save-dev

全局安装:

npm install gulp-uglify -g

整站静态文件压缩配置文件(html/css/image/js; 前提是安装下列require用到的模块):

var gulp = require('gulp'),//基础库

htmlmin = require('gulp-htmlmin'),//html压缩

cssmin = require('gulp-minify-css'),//css压缩

jshint = require('gulp-jshint'),//js检查

uglify = require('gulp-uglify'),//js压缩

imagemin = require('gulp-imagemin'),//图片压缩

pngquant = require('imagemin-pngquant'),//图片深入压缩

imageminOptipng = require('imagemin-optipng'),

imageminSvgo = require('imagemin-svgo'),

imageminGifsicle = require('imagemin-gifsicle'),

imageminJpegtran = require('imagemin-jpegtran'),

domSrc = require('gulp-dom-src'),

cheerio = require('gulp-cheerio'),

processhtml = require('gulp-processhtml'),

Replace = require('gulp-replace'),

cache = require('gulp-cache'),//图片压缩缓存

clean = require('gulp-clean'),//清空文件夹

conCat = require('gulp-concat'),//文件合并

plumber=require('gulp-plumber'),//检测错误

gutil=require('gulp-util');//如果有自定义方法,会用到

var date = new Date().getTime();

('clean',function(){

return ('min/**',{read:false})

.pipe(clean());

});

function errrHandler( e ){

// 控制台发声,错误时beep一下

();

(e);

('end');

}

('cleanCash', function (done) {//清除缓存

return (done);

});

('htmlmin', function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//压缩HTML

collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />

removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />

removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

minifyJS: true,//压缩页面JS

minifyCSS: true//压缩页面CSS

};

(['index/*.htm','index/*.html'])

.pipe(plumber({errorHandler:errrHandler}))

.pipe(Replace(/_VERSION_/gi, date))

.pipe(processhtml())

.pipe(htmlmin(options))

.pipe(('min'));

});

('cssmin', function(){

('index/**/*.css')

.pipe(conCat('css/'))

.pipe(plumber({errorHandler:errrHandler}))

.pipe(cssmin({

advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]

compatibility: 'ie7',//保留ie7及以下兼容写法类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]

keepBreaks: false,//类型:Boolean 默认:false [是否保留换行]

keepSpecialComments: '*'

//保留所有特殊前缀当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀

}))

.pipe(('min'));

});

('jsmin', function () {

(['index/js/*.js','!index/**/{text1,text2}.js'])

.pipe(conCat('js/'))

.pipe(plumber({errorHandler:errrHandler}))

.pipe(uglify({

mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型:Boolean 默认:true 是否修改变量名

compress: true,//类型:Boolean 默认:true 是否完全压缩

preserveComments: 'false' //保留所有注释

}))

.pipe(('min'));

});

('imagemin', function () {

('index/**/*.{png,jpg,gif,ico}')

.pipe(plumber({errorHandler:errrHandler}))

.pipe(cache(imagemin({

progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性

use: [pngquant(),imageminJpegtran({progressive: true})

, imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件

})))

.pipe(('min'));

});

('default',['clean'],function(){

('cssmin','htmlmin','jsmin','imagemin');

});

(例子) 详细介绍:

( npm init 命令行创建文件方法

)

{

"name": "web",

"version": "1.0.0",

"description": "my text",

"main": "",

"dependencies": {

"gulp": "^3.9.1",

"gulp-cache": "^0.4.5",

"gulp-concat": "^2.6.0",

"gulp-htmlmin": "^2.0.0",

"gulp-imagemin": "^3.0.1",

"gulp-jshint": "^2.0.1",

"gulp-minify-css": "^1.2.4",

"gulp-plumber": "^1.1.0",

"gulp-uglify": "^1.5.4",

"gulp-util": "^3.0.7",

"imagemin-pngquant": "^5.0.0",

"jshint": "^2.9.2",

"gulp-clean": "^0.3.2"

"devDependencies": {

"gulp-cheerio": "^0.6.2",

"gulp-dom-src": "^0.2.0",

"gulp-jslint": "^1.0.1",

"gulp-processhtml": "^1.1.0",

"gulp-rename": "^1.2.2",

"gulp-replace": "^0.5.4",

"gulp-webpack": "^1.5.0",

"imagemin-gifsicle": "^5.1.0",

"imagemin-jpegtran": "^5.0.2",

"imagemin-optipng": "^5.1.1",

"imagemin-svgo": "^5.1.0",

"webpack": "^1.13.1"

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [

"web"

"author": "yl",

"license": "ISC"

}

devDependencies里的内容即为你安装gulp的模块插件名称和版本号!

最后,里指定到当前项目目录下输入gulp命令即可:

gulp default