前言：
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代码：
{
"name": "ajaxTest",//项目名称
"description": "baiyuncms-wap-ajax",//项目描述
"version": "0.1.0",//项目版本
"private": true,//具体不明 *上得到的答案是和版本控制相关 可选
"author": {
"name": "unofficial",
"email": "no@mail"
},//可选
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.7.3",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.6.1"
}//不明确版本可以使用*代替 使用--save-dev会自动填写版本 必须
}
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)
原因说明：网络连接的原因