今天花了半天时间, 研究了一下网上的一个叫做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.
本来想好好玩玩 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不是太熟, 所以就按照他的文档自己操作了一边, 然后记录下来.
本文完