利用Node 搭配uglify-js壓縮js文件，批量下載圖片到本地

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

上面的下載需要網絡好一點，不然會失敗。

以上只是非常簡單的功能，但積少成多，慢慢學習。