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

工具

  • 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了.

  • nodejs配合sass监听项目文件变动自动生成css文件

    / 分类: 开发,工具,实践 / No Comments

    以前弄scss只能在ruby下面, nodejs版less.js已经比较成熟, 而sass.js(1)不支持scss(后面作者又去开发Stylus了~), 后面出现的scss-js(2)已经错过时机(支持scss语法有限, 已很久没更新了).
    这大概是导致目前less在国内爆发的一个原因吧. 排除环境依赖影响, 个人感觉sass比less好很多, 相信不少同学也这样认为~
    对比了目前的4种css预处理语法: sass(scss)/less/stylus/closure-stylesheets, 还是更喜欢scss.

    用nodejs写小工具蛮适合的, 但之前苦于sass在nodejs下没有比较好的package. 终于node-sass(3)出现, 目前npm里最好的sass package, 测试了一些scss文件基本都OK, 语法有误时也会返回错误信息.

    基于node-sass写了个小工具, 监听项目目录, 当文件夹里的.scss文件被修改则立即编译成css文件, 使用:
    1. sudo /path/scss.js # 载入已写好的配置, 侦听多个项目;
    推荐这种方法, 把多个项目的配置信息写到 scssConfig.js中, 不需要额外的参数.
    2. sudo /path/scss.js -build # 读取所有的.scss并编译成.css文件;
    3. sudo /path/scss.js -clear # 清除错误日志(如果配置了 scssConfig.js里logDir的路径);
    4. sudo /path/scss.js /path/project1/ /path/lib/ # 临时监听project1目录, lib为.scss里@import的path(无@import,可以省略);

    源码放在: https://github.com/kairyou/f2e-tools/tree/master/scss

    附送使用node-sass时遇到的问题以及解决方法:
    1. error reading values after :
    读取value出错, 可能是颜色错误不是6位或3位, 比如:color:#abcde;
    2. .scss里面写: @charset "UTF-8"; 会报错: top-level blockless directive must be terminated by ';'
    @see: https://github.com/andrew/node-sass/issues/23
    3. error reading values after opacity / progid
    使用: unquote("..."); @see: https://github.com/hcatlin/libsass/issues/72

    文中提到的sass几个package的link:
    1) sass: https://github.com/visionmedia/sass.js
    2) scss: https://github.com/bmavity/scss-js
    3) node-sass: https://github.com/andrew/node-sass

    有了nodejs版, 其他语言(非ruby), 比如PHP的phpsass/scssphp等就可以忽略了~

  • sublime text 项目同步插件(scp)

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

    基于sublime的SimpleSync插件修改, 完善了原插件的一些缺陷, 比如: 不支持windows系统, 保存时会强制同步, 不支持快捷键调用, 修改配置需要重启sublime.
    所以把源码大部分都修改了. 原版优秀的地方也都已保留, 比如: 执行同步时使用多线程来避免UI阻塞, 同时支持本地同步和同步到server.
    已增加对ST3的支持.

    下面把功能列一下:

    1. 1. 把本地项目的文件同步到本地或server (比如可以用来: 同步到server端预览, 减少不停地commit-push-pull; 或本地编辑时备份到其他文件夹等)
      注: 同步本地用cp命令, 同步server用scp命令
    2. 2. 支持多文件夹, 可以把所有项目的规则写到一起, 针对不同的文件夹执行不同的命令.
    3. 3. 支持多规则, 可以把当前编辑的文件同时推到N个server或本地文件夹.
    4. 4. 同步时的命令利用threading多线程执行, UI不会阻塞, 可以继续操作编辑器(否则sublime执行CMD等命令会卡住, 等命令结束才会响应)
    5. 5. + 支持windows系统 (原版只支持MacOS and Linux)
    6. 6. + 保存文件时是否自动同步, 可在配置里设置 ("autoSync": false)
    7. 7. + 支持快捷键调用同步 (会自动保存当前文件, 再同步)
    8. 8. + 同步前读取配置, 修改配置不需要重启sublime.

    简单配置:

    修改配置: Preferences > Package Settings > sublimeSimpleSync
    增加快捷键: Preferences > Key Buildings - User, 添加一行, 比如:
    { "keys": ["alt+s"], "command": "sublime_simple_sync"},

    项目地址: https://github.com/kairyou/SublimeSimpleSync

  • Sublime Text 新建文件的模版插件: SublimeTmpl

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

    写了个sublime的模版插件, 项目主页: https://github.com/kairyou/SublimeTmpl
    这样就可以新建文件时使用模版的内容了, 目前添加了html/js/css/php/python/ruby的模版. 不需新建空白文件, 再从其他文件复制内容过来了.
    已增加对Sublime Text3的支持.

    使用:

    1. ST菜单, File-New File (SublimeTmpl), 选择列表里的相应菜单, 可直接使用模版新建文件.
    2. 命令, cmd+shift+p, 输入: "tmpl:", 可以找到创建文件的菜单列表.
    3.快捷键, 默认快捷键见下面. 可以自己修改, 方法见"设置"部分.

    默认快捷键:

    ctrl+alt+h html
    ctrl+alt+j javascript
    ctrl+alt+c css
    ctrl+alt+p php
    ctrl+alt+r ruby
    ctrl+alt++shift+p python
    
    关闭默认快捷键:

    Package Settings > SublimeTmpl > Settings - User, 增加disabled_keymap_actions配置:
    "disabled_keymap_actions": "html, css" // 关闭html/css语法的快捷键(多个逗号分隔) "disabled_keymap_actions: "all" //关闭所有语法快捷键

    安装:

    方法1. 通过 Package Control
    Package Control / Install Package, 搜索"SublimeTmpl" 或 "tmpl", 安装.
    * [2012/08/01]已经通过Package Control审核

    方法2. Github
    打开项目主页, git clone到ST的Packages文件夹(\Data\Packages), 或直接把ZIP格式的下载下来解压到Packages文件夹(文件夹名称必须为:SublimeTmpl).

    设置:

    菜单: Preferences / Packages Settings / SublimeTmpl, 可以编辑菜单/快捷键/新语法等等.

    如果你想贡献自己的package, 可以参考我这篇文章的介绍:
    http://www.fantxi.com/blog/archives/how-to-submit-a-sublime-package/

    新增特性:

    1. 用户自定义模板 (Thanks @Xu Cheng)
    自定义模板路径: "Data\Packages\User\SublimeTmpl\templates" 目录, 会优先使用(可以参考:默认的模板).
    默认模版路径: "Data\Packages\SublimeTmpl\templates" 目录.
    用自己自定义的模板: 推荐把默认模版目录的*.tmpl文件 复制到 自定义模板路径, 再去修改.

    2. 模板支持 ${date} 变量
    settings - user里面可以修改${date}默认的输出格式("%Y-%m-%d %H:%M:%S"), 比如改成: "date_format" : "%Y-%m-%d"

    3. 模板支持自定义 attr
    settings - user里添加:

    "attr": {
        "author": "your name" ,
        "email": "mail@yours.com",
        "link": "http://yours.com",
        "hello": "word"
    }
    

    就能在模板中使用 ${author} ${email} ${link} ${hello} 变量
    Thanks @vfasky (Blog)

    4. 保存文件时支持: ${saved_filename}, ${saved_filepath} 变量, settings - user里添加:
    "enable_file_variables_on_save": true, // 开启
    文件保存时, 上面的2个变量会替换为: 保存的文件名, 和文件路径.

    5. 支持: ${project_base_name}, ${project_path} and ${platform} 变量, settings - user里添加:
    "enable_project_variables": true, // 开启
    Note: 仅ST3支持, 上面的3个变量会替换为: 项目名, 项目路径, 当前系统环境.

    另外, 关于新增语言的附加说明

    1. 新增SublimeTmpl里面没有的语言

    首先请看: Packages Settings / SublimeTmpl / Settings - Default 的默认语法设置.
    如果要新增语法, 请选择: SublimeTmpl / Settings - User, 内容格式参考Settings - Default的内容, 比如新增两个语言test和yours:

    {
           "test": {"syntax": "Packages/test/test.tmLanguage", "extension": "test"},
           "yours": {"syntax": "Packages/Yours/Yours.tmLanguage", "extension": "abc"}
    }
    

    上面的"Packages/test/test.tmLanguage"是Packages目录内的syntax路径, extension是默认保存时使用的扩展名.

    新增开始菜单: 可以在SublimeTmpl / Settings - Menu里, 参照其他语法增加test和yours.
    新增快捷键: 可以编辑:SublimeTmpl / Key Bindings User( 格式参考: SublimeTmpl / Key Bindings Default)

    2. 新增Sublime的语言

    这个我也没新建过, 可以去Package Control或者github上面找个其他人添加的新语言, 参考参考.
    如果没找到别人写好的, 可以参考如下网址, 自己做:
    http://docs.sublimetext.info/en/latest/extensibility/syntaxdefs.html (官方文档, 利用AAAPackageDev这个插件制作)
    http://manual.macromates.com/en/language_grammars (textmate的doc, 和sublime大部分是相同的)
    https://github.com/LearnBoost/stylus/blob/master/editors/Stylus.tmbundle/Syntaxes/Stylus.tmLanguage (别人写好的语法, 可以和自己新建的对比)