Node的便民技巧-- 压缩代码 下载图片

压缩代码

相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现。但问题来了,这些都不会,难道就要面对几十个JS文件一遍遍来回“复制-压缩-创建-粘贴”,这样太不人性化了。  

于是可以借助Node + uglify-js 轻松实现。(前提你会点node操作)

1.首先看一下目录:

  |--uglifyJS

    |--js

      |--test1.js

      |--test2.js

|--uglify.js   //这个就是本文的重点编辑

2.打开uglifyJS文件夹

npm install uglify-js

3.编辑uglify.js

3.1 首先说一下思路和实现的东西

1、将需要压缩的文件放在一个JS文件夹下

2、把名字存储在一个数组下

3、为这组数组添加JS文件夹相对路径与.js后缀(其实这一步可以在上面的数组里一起完成)

4、遍历一下数组,将每一个路径进行  var result = UglifyJS.minify(**每一个文件路径** ,**压缩选项**)

5、将得到的result.code 利用fs的writeFileSync  写进 fs.writeFileSync(**文件名**, result.code, 'utf-8' , function(err){})

3.2 其实真的很简单,以下是全部代码

/**
* Created by QRL on 2016/8/21.
*/
var UglifyJS = require('uglify-js');
var fs = require('fs'); var JS = ['test1' , 'test2'];
//只需要写名字 自动将./js 加在每一个前面 并添加.JS后缀
var AddJS = function(JS){
var newJS = [];
JS.map(function (x) {
x = './js/'+x+'.js';
newJS.push(x);
})
return newJS;
}
var JSOptions = AddJS(JS);
//压缩的选项
var min_options = {
mangle:true, //输出变量名替换后的文件
compress :{
sequences : true, //使用逗号操作符加入连续的简单语句
properties : true, //使用点好重写属性访问,例如foo["bar"] → foo.bar
dead_code : true, //移除不可达的代码
drop_debugger: true, //移除调试器和调试语句
conditionals : true, //为if -else 和条件表达式应用优化
evaluate : true, //尝试去计算常量表达式
booleans : true, //多种针对布尔上下文的优化,例如 !!a ? b : c → a ? b : c
loops : true, //当我们可以静态的判断条件的取值时,针对do,while和for循环的优化
unused : true, //去掉没有被引用过的函数和变量
hoist_funs : true, // 提升函数声明
hoist_vars : true, //(默认值: false) — 提升var声明 (因为一般看起会增加输出的大小,所以它默认是false的)
if_return : true, //这对 if/return 和 if/continue 的优化
join_vars : true, //加入连续的var语句
cascade : true, //对于 sequences, transform x, x into xandx = something(), x into x = something() 的一些小优化
drop_console : true, //默认为false. 传入true会丢弃对console.函数的调用.
comparisons : true, //针对二进制节点应用某些特定的优化,例如:!(a <= b) → a > b (只在不安全时), 尝试去否认二进制节点,例如.a = !b && !c && !d && !e → a=!(b||c||d||e) 等等.
unsafe : false //应用“不安全”的转换
}
} //写文件封装函数
function writefs(min ,code){
fs.writeFile(min , code , 'utf-8' , function(err){
if (err) throw err;
console.log('success');
})
} var Uglify = function(options){
options = options || {};
options.type = (options.type || 'sign').toLowerCase();
options.outName = (options.outName || './js/out.min.js'); var data = options.data; if(options.type == 'sign'){
for(var i in data){
var result = UglifyJS.minify(data[i] ,min_options);
/*除去 .js 后缀*/
var min = data[i].replace('.js' ,'');
writefs(min+'.min.js' , result.code);
}
}else{
min_options.wrap = true;
min_options.outSourceMap = 'out.js.map';
var result = UglifyJS.minify(data , min_options);
writefs(options.outName , result.code);
}
} Uglify({
data :JSOptions,
type : 'sign', //利用状态 sign标志为单独压缩 其余为合并压缩
outName : './js/out.min.js'
});

简单的测试下,JS文件夹下 出来min.js压缩文件了。

下载图片

看到Github https://api.github.com/emojis  上有 emoji 各种表情,想着一个个“打开连接-图片另存为” ,要是一两个还好,好家伙,居然有800多个,瘆得慌。

于是想着利用node的http + fs 实现读取地址

实现思路

1.首先创建文件夹

2.通过json对象将地址一个个传给https 进行处理

3.将得到的数据data 存起来,利用writeFile写进数据

4.打开文件夹 一切都在了

/**
* Created by QRLon 2016/8/13 0013.
*/
var http = require('http');
var https = require('https');
var fs = require('fs'); //重新定义创建文件夹
function mkdirSync(url , mode , cb){
var path = require('path'),
arr = url.split('/');
mode = mode || 0777;
cb = cb || function(){}; if(arr[0]==='.'){
arr.shift();
}
if(arr[0] == '..'){
arr.splice(0, 2, arr[0]+"/"+arr[1])
} function inner(cur){
if(!fs.existsSync(cur)){ //不存在就创建一个
fs.mkdirSync(cur , mode)
}
if(arr.length){
inner(cur + "/" + arr.shift());
}else{
cb();
}
}
arr.length && inner(arr.shift());
}
//创建文件夹
mkdirSync('./data','',function(e){
if(e){
console.log('出错了');
}else{
console.log("创建成功")
}
})
mkdirSync('./img','',function(e){
if(e){
console.log('出错了');
}else{
console.log("创建成功")
}
})
var url = 'http://a33d82f76271fa5e5ac8.b0.upaiyun.com/apicloud/818900b273d2591478a6f3fd8a9ef0ac.txt'; http.get(url , function(res){
var data ='';
res.setEncoding('utf-8'); //定义文件编码
res.on('data' , function(chunk){
data += chunk;
}); res.on('end',function(){
fs.writeFile('./data/data.json', data ,'utf-8' ,function(err) {
if (err) throw err;
console.log ('文件写入成功');
}); var JSONData = JSON.parse(data)
console.log(JSONData)
for(var x in JSONData){
emjin(x ,JSONData[x]);
}
})
}) function emjin(x , url){
https.get(url , function(res){
var imgData = '';
res.setEncoding('binary'); //注意这里需要设置为二进制 不然后面打不开图片
res.on('data' , function(chunk){
imgData += chunk;
});
res.on('end' , function(){
fs.writeFile('./img/'+x+'.png' , imgData , 'binary' , function(err){
if (err) throw err;
console.log('success');
})
})
})
}

本来用 https://api.github.com/emojis  这个就可以 但是因为Http之前的问题(怪我没学好Http服务)

所以把内容复制了剪切到http://a33d82f76271fa5e5ac8.b0.upaiyun.com/apicloud/818900b273d2591478a6f3fd8a9ef0ac.txt

上面的下载需要网络好一点,不然会失败。

以上只是非常简单的功能,但积少成多,慢慢学习。

利用Node 搭配uglify-js压缩js文件,批量下载图片到本地的更多相关文章

  1. js 实现多文件批量下载

    关于兼容性问题: <a href="xxx.docx" target='_blank'></a> 下载文件时,这种写法是没有兼容性问题:但是下载图片时,IE ...

  2. SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型

    SQL 横转竖 .竖专横 (转载)   普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...

  3. Jsp实现筛选并压缩文件批量下载

    Jsp实现筛选并压缩文件批量下载 首先明确一下需求,网页端点击一下button,传递特定的参数到download.jsp网页,筛选文件,对过滤得到的文件进行压缩,然后返回前端一个压缩包下载. 以下的代 ...

  4. C#子线程中更新ui-----c# 多线程多文件批量下载

    c# 多线程多文件批量下载   废话少说,先演示一张效果图 简单说下过程喽 开发过程中其实总是会碰到项目想应用下载文件~ 看其他语言有很多封装好的类库可以使用~~ 作为小白的我并没有找到很多c#的案例 ...

  5. sublime text2之js压缩-Js Minifier

    一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M            当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M   ...

  6. Node.js 使用爬虫批量下载网络图片到本地

    图片网站往往广告众多,用Node.js写个爬虫下载图片,代码不长,省事不少,比手动一张张保存简直是天与地的区别.以前用Java也做过远程图片下载,但Node.js的下载速度更让人咂舌,这也是非阻塞式变 ...

  7. js 前端实现文件流下载的几种方式

    后端是用Java写的一个下载的接口,返回的是文件流,需求:点击,请求,下载 利用iframe实现文件流下载 //把上一次创建的iframe删掉,不然随着下载次数的增多页面上会一堆的iframe var ...

  8. js实现使用文件流下载csv文件

    1. 理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了.现在我们开始来理解下Bolb对象及它的 ...

  9. 利用node来下载图片到本地

      本文是针对于知道图片地址的下载图片方法. 同时也是我的处男作(额,怪怪的〜);不要在意这些细节. 最近在弄项目迁移,需要把http的链接全换成https的:以前的cms不支持http的协议,然后就 ...

随机推荐

  1. ACE前摄器Proactor模式

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/31/608952.html 当 OS 平台支持异步操作时,一种高效而方便的实现高性能 Web ...

  2. Codeforces Round #539 (Div. 2) 题解

    Codeforces Round #539 (Div. 2) 题目链接:https://codeforces.com/contest/1113 A. Sasha and His Trip 题意: n个 ...

  3. udhcpd源码分析2--读取配置文件

    1:重要的结构体 读取配置文件信息到全局的结构体struct server_config_t server_config中,这个结构在很多文件中都有引用到很重要. /* dhcpd.h */ stru ...

  4. bzoj 1006 [HNOI2008]神奇的国度 弦图+完美消除序列+最大势算法

    [HNOI2008]神奇的国度 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 4370  Solved: 2041[Submit][Status][D ...

  5. ES6中函数的扩展

    一.设置默认参数 ES6之前,给函数设置默认参数是这样做的: function fn(a) { if(typeof y === undefined){ a = a || 'hello'; } cons ...

  6. 希尔排序Shell sort

    希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...

  7. jQuery简单日历插件版

    先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...

  8. 【Nginx】不改系统源代码的情况下,动态网站离线缓存方案

    背景: 公司的一套系统,由前端.界面.服务层.大数据开发平架等多层组成,每一层被划分为多个模块,每个模块会依赖若干组建.由于公司的这套系统是部署在内网环境中的,现在需要拿出去给客户演示,用一个笔记本装 ...

  9. iOS多线程 iOS开发Demo(示例程序)源代码

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址(2013年12月29日更新版)   iOS程序源代码下载链接:01.大任务.zip22 ...

  10. bzoj 1030 ac自动机

    比较容易看出来先建立ac自动机,然后在自动机上做DP,设w[0..1][i][j]为当前不包括/包括字典中的字符串,当前在自动机中走到第i个节点,完成的文本的长度为j的方案数,那么比较容易的转移w[i ...