zoukankan      html  css  js  c++  java
  • 【NodeCC】nodejs版本的脚本压缩和compo工具

    对于前台开发而言,为了降低文件大小,js文件和css文件的压缩和组合几乎是默认的规矩。
    我们利用YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。 甚至 yui compressor 本身都已经支持 多文件的批量压缩。
    但是,为了更好的处理这些机械化的事情,我们通常还是需要脚本来辅助,让这些工作可以更好的自动化,可配置化。

    网上有很多类似的脚本工具,或者有的也已经编译成了可视化的工具来使用。

    我自己以前也写过python版本的,也用过同事写的类似的脚本,基本也都是python版本的。鉴于大多数前端的攻城师们对js更为熟悉,所以,这里也提供一个简易的nodejs 版本的。下午花了3个小时写的。

    NodeCC –> Node Compressor and Compoer

    代码很简单,基本就是读文件,写文件,调用系统jar命令 使用 yuicompressor 压缩文件。
    源码托管在:github.com/hongru/nodeCC 上,100行左右。

    【编码中需要注意的几个地方】

    • nodejs中fileSystem buffer的概念,简单的可以理解成文本数据流,所以,为了得到我们常见的文本,注意 readFile 后 toString的使用。
    • 生成新文件时,路径是否存在的判断,如果不存在,生成指定目录时,由于node本身的mkdir不支持多级目录,所以这里需要自己来处理多级目录的递归生成。
      有两种方式,一种是利用child_process 创建一个子进程调用系统命令 mkdir -p.
      另一种就是分析路径,一级一级递归创建目录。代码参考https://gist.github.com/2817910
      1. /* mkdir -p for node */  
      2. var fs = require('fs'),  
      3.     path = require('path');  
      4.   
      5. function mkdirpSync (pathes, mode) {  
      6.     mode = mode || 0777;  
      7.     var dirs = pathes.trim().split('/');  
      8.     if (dirs[0] == '.') {  
      9.         // ./aaa  
      10.         dirs.shift();  
      11.     }  
      12.   
      13.     if (dirs[0] == '..') {  
      14.         // ../aaa  
      15.         dirs.splice(0, 2, dirs[0] + '/' + dirs[1]);  
      16.     }  
      17.   
      18.     dirs.length && mkdir(dirs.shift());  
      19.     // mkdir  
      20.     function mkdir (d) {  
      21.         if (!path.existsSync(d)) {  
      22.             fs.mkdirSync(d, mode);  
      23.         }  
      24.   
      25.         dirs.length && mkdir(d + '/' + dirs.shift());  
      26.     }  
      27. }  
      28.   
      29. // eg  
      30. //mkdirpSync('hongru/me');  
    • 通过child_process 的spawn 来调用系统命令,比如 ls, java 等。然后通过stdout 和 stderr 来监听获得 命令所返回的log或者error信息。

    【使用方法】

    1. 当然,因为是nodejs版本的,所以自然需要安装nodejs,官方有提供详细说明
    2. 因为用了jar包 yuicompressor.jar, 所以,需要安装 JAVA的sdk,安装过程也很简单,不会的搜一下即可。
    3. 最后,关于config.json 文件的配置,很简单,都是两个字段,“source”和“target”,source代表源路径文件,target表示压缩之后生成的文件路径。
      支持目录级别。
      另外,如果source字段为一个数组的话,会将这个数组里面的文件按照顺序合并,然后压缩生成到指定target的路径。

      所以,config.json看起来会像是这个样子:

      1. {  
      2.     "css-test": {  
      3.         "source""test/css/",  
      4.         "target""test/public/css/"  
      5.     },  
      6.     "normal-file-compress": {  
      7.         "source""test/test.js",  
      8.         "target""test/test.min.js"  
      9.     },  
      10.     "normal-dir-compress": {  
      11.         "source""test/js/",  
      12.         "target""test/public/js/"  
      13.     },  
      14.     "compress-and-merge": {  
      15.         "source": [  
      16.             "test/js/a.js",  
      17.             "test/js/b.js"  
      18.         ],  
      19.         "target""test/public/js/ab.js"  
      20.     }  
      21. }  
    4. 将带有 yuicompressor.jar 的tools/ ,主脚本 nodecc.js, 以及配置好的config.json 放置在同一目录下,然后执行
      1. node nodecc.js  

      即可。

    好了,工具很简单,代码也很简单,希望能给有需要的同学提供一点点帮助 :)

    本文同步发表在 http://www.alloyteam.com/2012/05/nodecc-version-of-nodejs-script-compression-and-compo-tools/

  • 相关阅读:
    Vue中的混入对象mixins
    iView组件样式修改
    理解Vue.use
    webpack中的require.context
    Vue对象中的混入对象mixins
    nodejs获取客户端ip地址
    Typescript 实战 --- (3)接口
    Typescript 实战 --- (2)枚举
    进击JavaScript核心 --- (3)面向对象
    在windows中使用 nvm 实现node多版本管理
  • 原文地址:https://www.cnblogs.com/hongru/p/2522787.html
Copyright © 2011-2022 走看看