Grunt 使用記錄

想了解Grunt，能夠先去官網 看看。

第一次接觸Grunt是經過Coding的移動端項目, 剛開始由於環境的問題折騰了一兩天，而後就頓悟了。

Grunt構建工具對於前端開發而言，簡直是神器(ps.雖然我不是專職前端2333)... 高手們 以爲描述有誤歡迎指教。

這裏只是對個人使用過程作一些簡單的記錄和描述，說了這麼多，咱們開始吧。

Grunt入門

 

請先閱讀Grunt快速入門！

Grunt 做爲工具，目的是爲了提高開發效率，讓繁瑣的工做自動化。Grunt 之因此優秀，離不開龐大的插件庫。而咱們使用 Grunt ，核心就是如何讓這些插件爲咱們所用。

一句話：配置 Gruntfile.js 是關鍵

Gruntfile.js

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

前端最繁瑣的工做就是調樣式了，爲了方便快捷的寫 css 代碼，我想使用 saas 。那麼咱們開始配置 saas 開發環境吧。詳細參見 grunt-contrib-sass 。

一、進入項目根目錄安裝 grunt-contrib-sass 插件

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

二、打開配置文件進行相關配置

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 的編寫了。

 

[wenki](http://www.cnblogs.com/wenki/)