把Fireshell中的sass模块替换为less编译css

上一篇说了fireshell的简单使用 http://blog.csdn.net/huyoo/article/details/41013989
然后提到要装ruby和sass的gem包, 我不喜欢ruby, 所有我就把它这个项目的sass全部换成了less, 下面是过程.

1. 翻开 package.json看看, 里面的包有

"devDependencies": { 
"bower": "~1.2.6", 
"grunt": "~0.4.1", 
"grunt-contrib-concat": "~0.3.0", 
"grunt-contrib-sass": "~0.5.0", 
"grunt-contrib-uglify": "~0.2.0", 
"grunt-contrib-connect": "~0.3.0", 
"grunt-contrib-jshint": "~0.4.3",

看到了 grunt-contrib-sass之后, 我一想, 这帮人肯定有人开发了一个叫做 grunt-contrib-less 的库, 然后我打开 github.com的搜索页面, 输入 grunt-contrib-less, 点击搜索, 哈哈, 立马出现了一个 grunt-contrib-less的结果, https://github.com/gruntjs/grunt-contrib-less 让我对grunt又增添了几分好感.

2. 修改pacakge.json, 添加 grunt-contrib-less 包到依赖列表中.

"devDependencies": { 
"bower": "~1.2.6", 
"grunt": "~0.4.1", 
"grunt-contrib-concat": "~0.3.0", 
"grunt-contrib-sass": "~0.5.0", 
"grunt-contrib-less": "~0.11.0",

再次运行 grunt-dev命令, 结果提示 grunt-contrib-less包貌似没装, 看来手动之后, 不自动下载依赖包了. 那就自己干吧.

把 grunt-contrib-less 安装到本目录下:

fireshell> npm install grunt-contrib-less

一会功夫就装好了.

3. 修改 Gruntfile.js

因为我不用sass, 因为我没装ruby, 所以这里就把所有的sass的地方都替换为less的东西, 如果less没有对应的, 就删掉sass

主要是task和watch列表里

task添加:

/**
     * Compile Less CSS files
     * https://github.com/gruntjs/grunt-contrib-less      * Compiles all Less CSS files and appends project banner
     */
    less: {
      dev: {
        options: {
        },
        files: {
          '<%= project.assets %>/css/style.unprefixed.css': '<%= project.css %>'
        }
      },
      dist: {
        options: {
        },
        files: {
          '<%= project.assets %>/css/style.unprefixed.css': '<%= project.css %>'
        }
      }
    },

watch添加:

<pre name="code" class="javascript">watch: {
      concat: {
        files: '<%= project.src %>/js/{,*/}*.js',
        tasks: ['concat:dev', 'jshint']
      },      

//这里是添加的部分
      less: {
        files: '<%= project.src %>/less/{,*/}*.less',
        tasks: ['less:dev', 'cssmin:dev', 'autoprefixer:dev']
      },

在 grunt的task里注册less的任务

/**
   * Default task
   * Run `grunt` on the command line
   */
  grunt.registerTask('default', [
    'less:dev', 原来是 'sass:dev'

4. 复制src/sass为src/less, 然后把所有的*.scss扩展名全部改为*.less

5. 开始把所有的原来是sass格式的, 都改为less格式的

6. 使用grunt-dev命令运行查看, 有什么错误都会提示出哪个文件不是正确的less格式而不能编译.

7. 全部改成了less, 并且编译通过了, 再运行 grunt-dev

Running "less:dev" (less) task
File app/assets/css/style.unprefixed.css created: 0 B → 2.18 kB

Running "bower:dev" (bower) task

Running "autoprefixer:dev" (autoprefixer) task
File app/assets/css/style.min.css created.

Running "cssmin:dev" (cssmin) task
File app/assets/css/style.min.css created: 2.18 kB → 1.53 kB

Running "jshint:files" (jshint) task
>> 2 files lint free.

Running "concat:dev" (concat) task
File "app/assets/js/scripts.min.js" created.

Running "connect:livereload" (connect) task
Started connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Waiting...

8 grunt-dev会自动打开 http://localhost:9000/ 看到如下界面:





注意, ie8默认是看不到svg图像的.

列几篇我将sass改为less的过程中, 找到的几个有用的资料
http://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less http://stackoverflow.com/questions/16777677/less-css-if-variable-is-true-guard http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/
主要的问题是: sass的if语句比less的when判断好用一些, 更加符合程序员常见的流程控制.

另外一个就是less的mixin也是很好用的, 比sass的不差.

9 最后一个问题, 代码呢?

这个修改版的fireshell, 所有的代码我都放在了 https://github.com/encorehu/fireshell

欢迎来fork