Sass和compass 安裝 和配合grunt實時顯示 [Sass和compass學習筆記]

demo 下載http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855

爲何要學習Sass和compass ？提升站獨立和代碼產品化的絕密武器，尤爲是程序化css，能夠將寫程序的各類理論融入其中，打造NB的產品

首先 安裝 ruby

http://rubyinstaller.org/downloads/

注意 建議安裝ruby1.93 這個版本 最新版的ruby不靠譜 我在sass和Sencha Touch裏面遭遇過倒黴的問題

安裝了ruby 還要添加ruby的淘寶鏡像，這樣安裝快

http://ruby.taobao.org/

在cmd裏面

執行方法 添加方法

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources –l

 

安裝sass 很簡單

gem install sass

安裝compass 也很簡單

gem install compass

sass 做爲一個語法規則

compass 做爲一個編譯器和一個css3庫，也就是說寫好的sass 代碼要編譯，才能在瀏覽器裏面顯示，

蒼天，咱們要實時調試！

nodejs 和grunt 解決了這個問題

安裝nodejs

http://nodejs.org/download/ 

下載安裝 win的安裝包便可，安裝完成後查看版本號，確認安裝成功

沒錯 安裝完後 node也要添加源的鏡像 http://cnpmjs.org/   還有一個 http://npm.taobao.org/

我搬家後 不知道是cnpm 掛了仍是咋地 建議用淘寶的

添加方法

npm install -g cnpm --registry=http://r.cnpmjs.org

這樣添加完後 再用npm安裝的時候，用cnpm 代替速度很快的

nodejs裝完後，能夠開始裝grunt了

安裝能夠參考http://www.gruntjs.net/docs/getting-started/

安裝grunt 能夠分爲兩個部分

1 是grunt 自己

2 是grunt和命令行的交互的cli

ps 這裏說個ubuntu 上，經過ubuntu官方安裝源的問題，由於官方安裝源在命令行裏只能用「nodejs」 命令 調用node，因此grunt就失效了，須要在命令行裏面添加命令映射，具體命令我沒存在win下面，谷歌下就能夠找到

先安裝cli

npm install -g grunt-cli 或 cnpm install -g grunt-cli  經過cpm 鏡像安裝

而後安裝grunt

npm install grunt 或者  cnpm install grunt 經過cpm 鏡像安裝

安裝完後 就能夠準備 grunt 的配置文件和一個node項目的配置文件和準備須要安裝的插件

詳細能夠參考這裏

http://www.w3cplus.com/tools/getting-started-with-grunt.html

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

還有 livereload 插件 livereload 主要用來實現頁面伴隨這文件的修改而自動刷新

livereload 有兩個方式 1 是本身啓動一個服務器

                                    2結合iis 等服務器+谷歌瀏覽器插件

具體 能夠參考 這裏 http://www.cnblogs.com/qqloving/p/3614613.html

 

這裏有如何建立一個 項目的具體步驟

例如 進入cmd 進入一個目錄 執行 $ compass create webfans 建立一個名字叫webfans的項目

項目結構圖以下

能夠看到裏 在 config 裏面存儲了基本的配置（建議配置和麪向ruby編譯器的配置）

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

分別制定 css目錄 sass目錄 和圖片目錄 js目錄

要搭配nodejs發開工具 還須要添加node和grunt的配置文件

package.json，Gruntfile.js

首先配置package 基本的配置，先安裝時時編譯須要的插件

 

{
  "name": "webjs",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "0.4.3",
    "grunt-sass": "0.6.1"
  }
}

Gruntfile 的基本配置（實現實時編譯） 插件爲'grunt-sass'

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            sass: {
                files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
                tasks: ['sass:dist']
            }
        },
        sass: {
            dist: {
                files: {
                    'stylesheets/styles.css': 'sass/styles.scss'
                }
            }
        }
    });
    grunt.registerTask('default', ['sass:dist', 'watch']);
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

另一個插件爲grunt-contrib-compass

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            sass: {
                files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
                tasks: ['compass:dist']
            }
        },
        sass: {
            dist: {
                files: {
                    'stylesheets/styles.css': 'sass/styles.scss'
                }
            }
        },
        compass: {
           dist: {
              options: {
                config: 'config.rb'
            }
        }
    }
    
});
    grunt.registerTask('default', ['compass:dist', 'watch']);
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

相比 我更喜歡這個插件

這個是插件 配置詳解

https://www.npmjs.org/package/grunt-contrib-compass

不過通常用默認的就能夠了

配置完成後運行 grunt 就能夠了

不過如今還不能夠實現實時刷新

實時刷新的配置 須要谷歌插件

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect:{
      //這裏爲插件子刷新方式
      options: {
        port: 9000,
        hostname: 'localhost', //默認就是這個值，可配置爲本機某個 IP，localhost 或域名
        livereload: 35729  //聲明給 watch 監聽的端口
      },
      server: {
        options: {
          open: true, //自動打開網頁 http://
          base: [
            '.'  //主目錄
            ]
          }
        }
      
    },
    watch: {
      sass: {
        files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
        tasks: ['compass:dist']
      },
      livereload: {
        options: {
                  livereload:'<%=connect.options.livereload%>'  //監聽前面聲明的端口  35729
                },
                files:[  //下面文件的改變就會實時刷新網頁
                'app/*.html',
              'stylesheets/{,*/}*.css',
            'javascripts/{,*/}*.js',
          'images/{,*/}*.{png,jpg}'

          ]
        }
      },

      compass: {
       dist: {
        options: {
          config: 'config.rb'
        }
      }
    }


  });


grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['compass:dist','connect:server', 'watch']);
};

到此 配置完了