node.js以及grunt与sass的关系

Nodejs是Javascript做为服务端脚本进行web开发，Nodejs框架基于V8的引擎，是目前速度最快的Javascript引擎。（新兴的后台语言，RESTful API(link)，事件驱动，单线程，event loop来实现并行操作，非阻塞IO，V8虚拟机）

C/C++程序通过makefile管理编译测试打包的过程，Java程序通过Maven,Ant实现项目构建管理功能，
Python有pip，Ruby有gem，Nodejs的包管理工具是grunt。

Grunt是一个自动化的项目构建工具. 执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务。Grunt和Grunt插件是通过npm安装并管理的，npm是Node.js的包管理器。
grunt-cli并不grunt，grunt-cli的作用是管理本地各版本的grunt，让命令行可以直接执行grunt命令。

1. 安装Node.js(link)

node -v
npm -v

2. 安装grunt命令行界面

npm install grunt-cli -g

3. 创建sass项目

- www
    - _build
        - Gruntfile.js
        - package.json
        - README.md
    - assets
        - css
        - sass
            - 1.scss

Gruntfile.js

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON('package.json'),

        // Metadata.
        meta: {
            basePath: '../',
            srcPath: '../assets/sass/',
            deployPath: '../assets/css/'
        },

        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> ',

        // Task configuration.
        sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>1.css': '<%= meta.srcPath %>1.scss'
                },
                options: {
                    sourcemap: 'true'
                }
            }
        },
        watch: {
            scripts: {
                files: [
                    '<%= meta.srcPath %>/**/*.scss'
                ],
                tasks: ['sass']
            }
        }
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
    grunt.registerTask('default', ['sass']);
};

package.json

{
    "name": "gruntSass",
    "description": "gruntSass test",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "0.4.2",
        "grunt-contrib-watch": "0.6.0",
        "grunt-contrib-sass": "0.6.0"
    }
}

创建项目

cd _build
grunt

监视sass文件，自动编译

grunt watch

@Chrome sass 调试环境配置

启用grunt watch后，sass一改动，会自动编译成css文件

勾选 F12 -> Settings -> Enable CSS source maps -> Auto-reload generated CSS 后，浏览器会自动加载编译器生成的.css.map文件，浏览器根据文件中的

"sources": ["../sass/_reset.scss","../sass/1.scss"],

获取原始.scss的路径。
可以在Source中看到.scss文件，修改后右键另存为替换原文件

@Sass编译遇到中文注释报错处理

C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.13\lib\sass\engine.rb
文件末尾添加
Encoding.default_external = Encoding.find('utf-8')