Nodejs，Grunt配置sass自动编译成css

Nodejs是服务端的，用于并发处理事件。

Grunt是应用程序构建，任务管理工具，能够自动化地许多繁琐的工作。

sass是css语言的一种拓展，用于更高效更规范写出css。

环境：node与ruby

grunt的使用需要安装grunt与nodejs环境，而sass的使用需要安装sass和ruby环境。

现在安装好node.js后，可在cmd中输入node -v查看是否安装成功，若成功则会显示版本号。

安装好后，在cmd中输入npm update -g npm，该命令执行后将会把npm配置到系统路径中。可用npm -v来查看是否成功

接着输入 npm install -g grunt-cli（cli是command line interface），将grunt命令配置到系统路径中。

之后再项目的根目录下创建好package.json和Gruntfile.js两个文件

package.json：该文件用来储存一下项目相关的信息，以及grunt的使用所需要以来的库。

Gruntfile.js：该文件是用来配置和定义任务的，这些任务中的一部分依赖于package.json中grunt插件。

由于本文章主要讲述的是sass的自动编译的实现，故package.json和Gruntfile.js也是以此为例的。（在配置好这两文件后使用npm install，便可在项目中安装相应的插件）

此为package.json的内容：
{
  "name": "gruntSass",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-watch": "*",
    "grunt-contrib-sass": "*"
  }
}
在cmd中使用 npm install <模块名> --save-dev便可在其依赖库中加入相应的模块了。


此为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 %>style.css': '<%= meta.srcPath %>style.scss'
                },
                options: {                       // Target options
                    style: 'expanded'
                }
            }
        },
        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']);
};

Gruntfile.js是实现grunt工具的核心，这文件中包括了所有配置和索要执行的任务。

想要弄明白Gruntfile.js文件中的代码，我就要从头开始重新构建它：

module.exports = function（grunt）{

      grunt.initConfig({

            pkg:grunt.file.readJSON('package.json')

   });

};

上述代码启动了配置的初始化函数，把package.json中的设置放到了缓存中，这样就可以在Gruntfile.js文件中的其他位置引用这些值了

接着是配置一个合并程序中脚本的任务：

module.exports = function（grunt）{

    grunt.initConfig({

        pkg:grunt.file.readJSON('package.json')，

        concat：{

            options：{
                separetor:';'
            },
            dist:{
                src:['src/**/*.js'],
                dest:'dist/<%= pkg.name %>.js'
            }

        }

    });

};

这段代码是让Grunt从src/目录中拉出。js文件，把他们合并后用在package.json中定义的名字保存于dist/目录下。

sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>style.css': '<%= meta.srcPath %>style.scss'
                },
                options: {                       // Target options
                    style: 'expanded'
                }
            }
        }

这代码是将 srcPath: '../assets/sass/'下的style。scss文件转译成css保存于 deployPath: '../assets/css/'目录下的，style：expended是表示转译输出文件的代码格式。