Grunt使用记录

---

想了解Grunt，可以先去官网 看看。

第一次接触Grunt是通过Coding的移动端项目, 刚开始因为环境的问题折腾了一两天，然后就顿悟了。

Grunt构建工具对于前端开发而言，简直是神器(ps.虽然我不是专职前端2333)… 高手们 觉得描述有误欢迎指教。

这里只是对我的使用过程做一些简单的记录和描述，说了这么多，我们开始吧。

Grunt入门

---

请先阅读Grunt快速入门！

Grunt 作为工具，目的是为了提升开发效率，让繁琐的工作自动化。Grunt 之所以优秀，离不开庞大的插件库。而我们使用 Grunt ，核心就是如何让这些插件为我们所用。

一句话：配置 Gruntfile.js 是关键

Gruntfile.js

先来看看我目前的 配置文件 。

前端最繁琐的工作就是调样式了，为了方便快捷的写 css 代码，我想使用 saas 。那么我们开始配置 saas 开发环境吧。详细参见 grunt-contrib-sass 。

1、进入项目根目录安装 grunt-contrib-sass 插件

npm install grunt-contrib-sass --save-dev

2、打开配置文件进行相关配置

A.在 grunt.initConfig 中配置 sass ，实现由 .scss 生成 .css

    sass: {
        server: {
            options:{
                sourcemap: 'none'
            },
            files:[{
                expand: true,
                cwd: '<%= yeoman.app %>/styles/scss',
                src: ['**/*.scss'],
                dest: '<%= yeoman.app %>/styles',
                ext: '.css'
            }]
        }
    }

只配置了几个基本的参数，匹配原目录对应文件，指定生成css文件目录，通过

    grunt sass:server 

可以进行测试。

B.在 grunt.initConfig 中 grunt-contrib-watch 插件节点下配置监听，实现自动监测scss文件变化生成css

    watch:{
        sass: {
            files: ['<%= yeoman.app %>/styles/scss/*.scss'],
            tasks: ['sass:server']
        }
    }

指明监听目录和对应执行task即可。

这样自动监听 scss 文件生成 css 文件的环境就配置好了。然后就可以愉快的在

grunt serve

下进行 scss 的编写了。