Fireshell的使用说明

今天花了半天时间, 研究了一下网上的一个叫做Fireshell的前端项目, 这个项目地址是: https://github.com/toddmotto/fireshell

作者是 toddmotto, 一个前端开发工程师.

以前我用过他的css作为自己的网站的css, 以前的css 这里有个效果: http://ddtcms.com  当然, 作者的css已经改变了很多了.

他的博客我也看了一些, 都是html5和css3和js的, js和css功底都是很强的.

这几天看到他有个项目叫 fireshell, 就是一个模板项目, 

fireshell的结构是:

fireshell

----app

----docs

----src

src目录里是一些sass和js文件, 这个是前端项目开发的基础.

作者使用了 grunt的一系列工具, 这个grunt一系列的工具真的是nodejs中非常棒的东西, 可以完成一系列的自动化任务, 比如将scss文件编译成css文件.

为啥我不写sass文件了? 因为sass从3.0的版本来开始就开始支持原始的css的写法了, 所以都改成scss了.

当然还可以将less格式的文件编译成css文件.

还有其他的比如压缩css文件, 压缩js文件, 自动改名字, 等等.

看到grunt有这么强撼的功能, 真是叹息自己没有早点研究grunt的一系列工具. 没想到nodejs的库都已经这么丰富了. 我觉得是时候开始学习nodejs了. 毕竟我很多时候也要自己动手搞搞前端的东西.

废话再说这个文章就废了.

还是一二三四吧

1. 下载 fireshell

两种方法, 一个是到 http://getfireshell.com 下载1.0.0版的压缩包

另一个是github上去clone他的库, 建议clone, 因为github上都1.1.0了.

2.  解压缩fireshell, 不多说了

3. windows下运行grunt-dev.bat, 这个时候会将大量的依赖包自动安装到本级目录的node-modules里, 确保你网络畅通.

grunt-dev.bat

4. 再次运行 grunt-dev

grunt-dev

好了, 操蛋的开始了

Running "sass:dev" (sass) task
Warning: You need to have Ruby and Sass installed and in your PATH for
this task to work. More info:
https://github.com/gruntjs/grunt-contrib-sass Use --force to continue.

Aborted due to warnings.

这个是要装 Ruby , 因为sass是ruby界的玩意. 

本来想好好玩玩 fireshell的, 结果被ruby卡下了. 因为我不想用ruby.

5. 怎么办? sass用不了, 那就用less呗!!! 老子太聪明了!

6. 想到了就去做!

具体怎么做, 看下一篇. 

把Fireshell中的sass模块替换为less编译css http://blog.csdn.net/huyoo/article/details/41016175

这里多啰嗦一句fireshell的使用, 剩下的就是不断的修改app/里 的html文件和 src/sass里的 *.scss文件, 修改之后, grunt-dev进程会自动编译scss文件, 生成 style.min.css

因为我没装ruby和ruby的gem模块, 所以, 我就不列出那种效果了.

作者自己的文档: https://github.com/toddmotto/fireshell/blob/master/docs/DOCS.md 

因为我对这种grunt不是太熟, 所以就按照他的文档自己操作了一边, 然后记录下来.

本文完