前言：
1.sass編譯為css文件，早先時刻寫css，后來看了sass挺不錯的，於是在新的項目中開始使用上了sass。（grunt需要ruby環境，所以需要先安裝ruby，sass環境）
①安裝ruby/安裝sass
②編譯sass文件(eg:style)
sass style.scss style.css
③監控文件/文件夾的變化來自動編譯sass文件
sass --watch style.scss:style.css #file
sass --watch cssFilePath #directory(cssFilePath:sass文件的路徑)
注：
sass編譯風格：
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮后的css代碼。
2.js文件之前沒有做壓縮處理，如果被發現了也是用站長工具壓縮以下就使用了，操作流程略多了
grunt是基於nodejs的，使用前需要安裝以下nodejs，官網：nodejs.org，安裝方法正常軟件一樣安裝。nodejs的模塊安裝用的是npm管理的。
1.安裝nodejs
2.新建一個grunt項目
標准配置：
package.json #項目數據
gruntFile.js #配置grunt，設置任務，加載插件等
注：文件怎么寫稍后我們具體描述，先建兩個文件，文件代碼可以直接復制
2.安裝grunt
npm install -g grunt-cli
<!--2014-09-13補充
npm install grunt --save-dev
注：通過grunt -v可以查看版本
-->
注：安裝 grunt-cli 並不等於安裝了 Grunt 任務運行器！Grunt CLI 的任務是運行 Gruntfile 指定的 Grunt 版本。 這樣就可以在一台電腦上同時安裝多個版本的 Grunt。
3.安裝需要用到的grunt插件
npm install grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch --save-dev
注：--save-dev自動完善package.json
grunt-contrib-sass #sass編譯插件
grunt-contrib-uglify #js壓縮插件
grunt-contrib-watch #監控插件
4.運行監控方法
grunt watch
第一次寫技術文章，不正確/不詳之處多多包含，有問題一起探討。
packjson代碼：
1 { 2 "name": "ajaxTest",//項目名稱 3 "description": "baiyuncms-wap-ajax",//項目描述 4 "version": "0.1.0",//項目版本 5 "private": true,//具體不明 stackoverflow上得到的答案是和版本控制相關 可選 6 "author": { 7 "name": "unofficial", 8 "email": "no@mail" 9 },//可選 10 "devDependencies": { 11 "grunt": "^0.4.5", 12 "grunt-contrib-sass": "^0.7.3", 13 "grunt-contrib-uglify": "^0.5.1", 14 "grunt-contrib-watch": "^0.6.1" 15 }//不明確版本可以使用*代替 使用--save-dev會自動填寫版本 必須 16 }
gruntFile.js
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), skinPath: { js:'AjaxTest/skin/js', //jsName byNewPage 14 15 css:'AjaxTest/skin/css' //cssName style 24 29 },//可選 不使用時具體配置文件涉及到的路徑需要修改 uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: '<%= skinPath.js %>/byNewPage.js', dest: '<%= skinPath.js %>/byNewPage.min.js' } },//js壓縮的配置文件 sass: { // Task dist: { // Target options: { // Target options style: 'expanded' }, files: { // Dictionary of files '<%= skinPath.css %>/style.css': '<%= skinPath.css %>/style.scss' // 'destination': 'source' } } },//sass編譯的配置文件 watch: { files: ['<%= uglify.build.src %>','<%= skinPath.css %>/style.scss'], tasks: ['default'] }//監控的配置文件 }); // Load the plugin 加載插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task(s). 執行默認方法 grunt grunt.registerTask('default', ['uglify','sass']); };
常見錯誤分析：
①
Running "watch" task
Waiting...
>> File "index.cnblogs.scss" changed.
Running "sass:dist" (sass) task
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
Use --force to continue.
Aborted due to warnings.
原因說明：沒有安裝ruby環境，並且需要安裝一下sass.
②
G:\wwws\unofficial.cnblogs.com>gem install sass
ERROR: While executing gem ... (Gem::RemoteSourceException)
HTTP Response 301
原因說明：ruby版本太低的原因，卸載已經安裝的ruby版本，http://rubyinstaller.org/downloads/這里下載最新的ruby安裝成功后，再執行安裝sass命令即可！
③
ERROR: Could not find a valid gem 'sass' (>= 0) in any repository
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ETIMEDOUT: A connection attempt failed because the connected party di
d not properly respond after a period of time, or established connection failed
because connected host has failed to respond. - connect(2) (http://rubygems.org/
latest_specs.4.8.gz)
原因說明：網絡連接的原因