• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

  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

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)

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap