前言:

  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,//具体不明 stackoverflow上得到的答案是和版本控制相关 可选
"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)

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

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

  1. 【前端】一句命令快速合并压缩 JS、CSS

    引用自:一句命令快速合并 JS.CSS 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到10个或者更多. 而项目上线后,会要求将所 ...

  2. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  3. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  4. 《React+Redux前端开发实战》笔记3:基于Webpack构建的Hello World案例(下)

    2.使用React编码 下面正式开始使用React来编写前端代码. (1)npm安装react和react-dom: npm install react react-dom -S (2)用下面代码替换 ...

  5. 前端开发必备组件库【基于原生js、兼容主流浏览器、B/S必备】

    [持续更新中...跪求点击右上角星星,好人一生平安!] API详见github,链接如下: https://github.com/pomelott/pomelo-plug-in

  6. 【前端开发】】ES6属性promise封装js动画

    如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  8. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  9. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

随机推荐

  1. each遍历

    <script> $(function () { $.each([52, 97], function(index, value) { alert(index + ': ' + value) ...

  2. 2018-10-19,下午4点拿到京东offer

    今天12点没有问题就签.岗位,地点都很满足.京东居然对我这么好,保证以后不做损坏京东利益的事写给以后的自己.

  3. Linux 第十三天

    十五.shell编程 1.Shell是什么 1)Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用Shell来启动.挂起.停止甚至是编写一 ...

  4. python信息收集之子域名

    python信息收集之子域名 主要是以下3种思路: 字典爆破 搜索引擎 第三方网站 0x00 背景知识 list Python内置的一种数据类型是列表:list是一种有序的集合. >>&g ...

  5. RS232、RS485和RS422

    一.232电平.TTL电平和CMOS电平        1.232电平:逻辑1:-3V--15V: 逻辑0:+3-+15V. 2.TTL电平:逻辑1:5V: 逻辑0:0V.具体是,输出高电平:VOH≥ ...

  6. FPGA的发展史及FPGA 的基础架构

    通过了解早期FPGA的发展,理解FPGA究竟是干什么的,FPGA到底在电子设计领域起到了什么样的作用,下面是一张早期的设计过程 早期的设计流程过程中,只有当硬件完成了才能够得到功能的验证,随着集成电路 ...

  7. kmp循环节

    循环判断   i%(i-next[i]) == 0 && next[i] != 0 循环长度  i-next[i];

  8. 虚拟机下Linux操作Ubuntu

    备忘Ubuntu虚拟机环境配置 目录 更新源修改 #支持https的下载 apt 源使用 HTTPS 以确保软件下载过程中不被篡改.因此,我们首先需要添加使用 HTTPS 传输的软件包以及 CA 证书 ...

  9. NET Core微服务之路:自己动手实现Rpc服务框架,基于DotEasy.Rpc服务框架的介绍和集成

    本篇内容属于非实用性(拿来即用)介绍,如对框架设计没兴趣的朋友,请略过. 快一个月没有写博文了,最近忙着两件事;    一:阅读刘墉先生的<说话的魅力>,以一种微妙的,你我大家都会经常遇见 ...

  10. wampserver 的默认首页设置

    # wampserver 首页顺序设置 <IfModule dir_module> DirectoryIndex index.php default.php index.html inde ...