前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

前言：

　　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 installgrunt-contrib-sassgrunt-contrib-uglifygrunt-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) taskWarning: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-sassUse --force to continue.

Aborted due to warnings.

原因说明：没有安装ruby环境，并且需要安装一下sass.

②

G:/wwws/unofficial.cnblogs.com>gem install sassERROR: 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 repositoryERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)Errno::ETIMEDOUT: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failedbecause connected host has failed to respond. - connect(2) (http://rubygems.org/latest_specs.4.8.gz)

原因说明：网络连接的原因