专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

2013年6月

  • sublime利用ClosureCompiler和YUICompressor本地压缩

    / 分类: 工具,实践 / 1 Comment

    server端基本靠nodejs来压缩了, 本地也可能因为特殊需求而需要直接压缩js/css, 不同的系统node的兼容不算好, 不好配置统一的环境, 而且有些人也用不到到node. 所以想到了利用基于java的ClosureCompiler和YUICompressor(下面简称CC和YUI).

    写了2个ST的build tool, 源码:
    https://github.com/kairyou/SublimeGoogleClosureCompiler
    https://github.com/kairyou/SublimeYUICompressor
    在ST2/ST3(Windows/Mac)下面测试通过, Linux应该也能跑.
    如果有语法错误可以直接双击console面板的错误行, 就会跳到源文件的对应行.
    直接git clone或下载到ST插件目录就可以了.
    使用时在ST的tool-build system选择CC或YUI后, ctrl+b直接压缩(推荐js使用CC压缩, css使用YUI压缩).

    因为之前用editplus和vim时, 用到了淘宝压缩的cmd, 所以写cmd时copy了大部分代码, 节约了很多时间, 感谢.
    开发中也遇到几个蛋疼的问题, 花了不少功夫才解决了这些问题:
    sublime的build system设计的不够好, 如果console面板错误行没输出文件的绝对路径, 双击错误行不会跳转.
    YUI的输出错误不带路径, 所以需要自己再包一层cmd/bash脚本, 捕获输出并加上文件路径再返回给ST.
    而且YUI返回错误时还附带了一堆java信息, 需要过滤掉.
    另外, Windows下面cmd捕获/修改输出太弱了, 不得不写个hack来存放输出再读取再修改. 有兴趣的可以对比下SublimeYUICompressor/bin下面的cmd和sh文件就明白了.

    另外Windows下面要有%JAVA_HOME%的环境变量, 如果没有需要装JDK, 请查看https://github.com/kairyou/JDK, 里面有快速搭建说明.

  • Mac下配置mnmp环境

    / 分类: 工具,实践 / 9 Comments

    虽然比较喜欢玩下新语言, 但是php还是常会用到的. lnmp很多人都听过, 但是不能用在Mac上面, 另外还有个mnpp但在osx 10.8.3下面跑不起来.
    所以自己手动一步步安装, 整理了方便安装的bash脚本, 暂且叫mnmp吧, 实际上也是Mac+nginx+mysql+php, 也许有点标题党, 见谅见谅~ 不过总体上能为准备装mnmp的同学省掉不少弯路, 因为我参考一些文章安装时也碰到几个问题卡住了.

    安装:

    把: https://github.com/kairyou/mac-bash-scripts的脚本下载下来.
    安装前请确认安装了homebrew, 就不提了. 开始安装:
    bash切换到setup-mnmp.sh目录, 然后执行:sh setup-mnmp.sh 就等着自动安装吧.

    必要的一些配置:


    nginx:
    vim /usr/local/etc/nginx/nginx.conf
    http {...} 里面最后面加上: include vhost/*.conf; (大概是倒数第三行的位置)
    vim /usr/local/etc/nginx/vhost/default.conf , 添加类似下面的内容:

    server {
        listen       8080;
        server_name  dev.local;
        root   /Users/leon/Workspace;
        index  index.html index.htm index.php;
    
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
        #error_page  404 /404.html;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {root html;}
        location ~ .*\.(php|php5)?$ {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            include fastcgi.conf;
        }
        location / {
            if (!-e $request_filename){
                rewrite ^/sitemap.xml$ /sitemap.php; # rewrite
            }
        }
        access_log off;
    }
    

    sudo sh -c "echo '127.0.0.1 dev.local' >> /etc/hosts"
    上面的nginx配置和命令是绑定http://dev.local作为域名, 绑定到/Users/leon/Workspace目录(域名和目录根据自己的需要修改吧).

    php-fpm:
    vim /usr/local/etc/php/5.6/php-fpm.conf, 找到并修改下面3行, 后面两个是要注释掉的:
    error_log = /tmp/php-fpm.log
    ;user = _www
    ;group = _www
    另外php.ini的路径: /usr/local/etc/php/5.6/php.ini, 如果有额外需求自己修改, 比如:
    date.timezone = Asia/Shanghai
    error_reporting = E_ALL

    mysql:
    基本不需要配置了, 配置文件在/usr/local/opt/mysql/my-new.cnf 如果没有就是 my.cnf.
    默认不需密码, 如果需要可以执行: mysql_secure_installation 一步步来, 本地开发意义不大.

    启动重启service脚本:

    设置权限: chmod +x ./mnmp.sh
    然后运行: ./mnmp.sh start | stop | restart 即可.
    推荐加到profile里面, 比如: echo "alias mnmp='/Users/你的路径/mnmp.sh'" >> ~/.bash_profile
    source ~/.bash_profile
    因为我不需要开机启动, 如果有需要开机启动的可以参考gist.github.com/mystix/3041577最下面的那几行.
    然后就可以直接: mnmp start 这样用了.

    Ps: 如果遇到类似这样的错误: "xxx" failed (13: Permission denied), 需要设定下权限:
    chmod 755 $HOME && chmod 755 $HOME/Documents/

    phpmyadmin:(可选)
    下载: www.phpmyadmin.net/home_page/downloads.php
    解压到nginx的conf指定的目录, config.sample.inc.php重命名为config.inc.php, 修改$cfg['Servers'][$i]['AllowNoPassword'] = true;
    Ps: 如果phpmyadmin报错:The mcrypt extension is missing. 可以关掉mnmp, 执行下:brew install php54-mcrypt
    之后打开: http://dev.local:8080/phpmyadmin 应该就OK了.

  • 解决Mac下SublimeLinter的Unsafe Characters警告

    / 分类: 开发,实践 / 1 Comment

    Mac下编辑JS文件, 如果是中文字符的行会警告: This character may get silently deleted by one or more browsers.

    SublimeLinter 的官方文档http://goo.gl/VYzZ0, 里面也说的含糊不清, 只是告诉要装nodejs或设置sublimelinter_executable_map.
    On Mac OS X, you must install Node.js if you plan to edit Javascript or CSS files that use non-ASCII characters in strings or comments, because JavaScriptCore is not Unicode-aware.
    OS X默认的JavaScriptCore(jsc)不支持非ASCII字符, 所以会报上面的警告, 使用nodejs才行.

    debug了下SublimeLinter的源码, 发现把Package Settings->SublimeLinter->Settings - User加上:
    "sublimelinter_executable_map":
    {
    "javascript": "/Users/leon/.nvm/v0.10.8/bin/node" // which node
    },
    就OK了, 开始还以为要设置"node":"node path", 原来是设置"javascript"..

    没安装nodejs到/usr/local/bin, 如果使用其他编辑器里的jshint/jslint应该也会遇到这个警告, 可以尝试修改node路径来解决.