易迅前端工具盒介绍（二）——文件压缩

[YIXUNFE]

易迅前端工具盒介绍（二）——文件压缩

文件压缩功能主要是为了方便压缩临时的，没有配置工作流的 JS、CSS 文件。

涉及的 NPM 模块：

• uglifycss
• uglify-js

:open_mouth: 由于没有将 NPM 模块代码上传到项目中，在运行或打包之前记得要先 npm install 一下哦。

## 功能点介绍 ### 懒加载

由于盒子打开时默认是构建任务面板，所以文件压缩面板以及后续的功能面板都并不是随着盒子的打开而初始化的。

只有当用户点击对应的面板导航后，才会触发初始化事件。所以与构建功能的模块不同，文件压缩的业务逻辑被分配在 panel/ 文件夹下。

### 一键复制

为了方便用户复制压缩后的内容，界面上增加一个“复制”按钮。

点击后会使用 Electron 的 clipboard 模块向剪贴板中写入压缩后的内容。

### 支持 JS、CSS 切换

同时支持 JS 和 CSS 的压缩。

## 业务逻辑实现

uglify.js

'use strict'

var $ = require('jquery'),
  actionBtn = require('common/actionBtn'),
  ipc = require('electron').ipcRenderer

var panel = (function () {

  function _render (html, data, channelInfo) {
    $('#box').append(html)

    actionBtn.extend('uglify-it', _uglifyIt)
    actionBtn.extend('copy-it', _copyIt)

    var box = $('.uglify-box'),
      jsHandler = require('uglify-js'),
      cssHandler = require('uglifycss'),
      contextBox

    function _uglifyIt () {
      var currentCate = $('[name="cate"]:checked', box).val(),
        textarea = $('#uglify-context'),
        content = textarea.val(),
        result = ''
      if (currentCate === 'css') {
        textarea.val(cssHandler.processString(content))
      } else {
        result = jsHandler.minify(content, {fromString: true}).code
        textarea.val(result)
      }
    }

    $('#uglify-context').on('change', function () {
      var o = $(this),
        btn = $('.copy-it')
      if (this.value === '') {
        btn.addClass('disabled')
      } else {
        btn.removeClass('disabled')
      }
    })

    function _copyIt () {
      var textarea = $('#uglify-context'),
        str = textarea.val()
      if (str !== '') {
        ipc.send('copy-text', str)
      }
    }

  }

  return {
    tpl: '<div class="uglify-box">\
      <div class="select-box">\
        <label><input type="radio" name="cate" value="js" checked /> 压缩 JS </label>\
        <label><input type="radio" name="cate" value="css" /> 压缩 CSS </label>\
      </div>\
      <textarea placeholder="请输入需要压缩的内容" id="uglify-context" class="context"></textarea>\
      <div class="btn-box">\
        <button action="uglify-it" class="action uglify-it">压缩</button>\
        <button action="copy-it" class="action copy-it disabled" >复制</button>\
      </div>\
    </div>',
    render: _render
  }
}())

module.exports = panel

uglify 模块（panel/uglify.js）有两个属性，tpl 是面板的界面布局，render 是面板的初始化函数（仅执行一次）。

界面截图：

项目传送门：https://github.com/YIXUNFE/toolbox

Thanks