想了解Grunt,可以先去官网 看看。

第一次接触Grunt是通过Coding的移动端项目, 刚开始因为环境的问题折腾了一两天,然后就顿悟了。

Grunt构建工具对于前端开发而言,简直是神器(ps.虽然我不是专职前端2333)... 高手们 觉得描述有误欢迎指教。

这里只是对我的使用过程做一些简单的记录和描述,说了这么多,我们开始吧。

Grunt入门

请先阅读Grunt快速入门

Grunt 作为工具,目的是为了提升开发效率,让繁琐的工作自动化。Grunt 之所以优秀,离不开庞大的插件库。而我们使用 Grunt ,核心就是如何让这些插件为我们所用。

一句话:配置 Gruntfile.js 是关键

Gruntfile.js

先来看看我目前的 配置文件

前端最繁琐的工作就是调样式了,为了方便快捷的写 css 代码,我想使用 saas 。那么我们开始配置 saas 开发环境吧。详细参见 grunt-contrib-sass

1、进入项目根目录安装 grunt-contrib-sass 插件

npm install grunt-contrib-sass --save-dev

2、打开配置文件进行相关配置

A.在 grunt.initConfig 中配置 sass ,实现由 .scss 生成 .css

sass: {

server: {

options:{

sourcemap: 'none'

},

files:[{

expand: true,

cwd: '<%= yeoman.app %>/styles/scss',

src: ['**/*.scss'],

dest: '<%= yeoman.app %>/styles',

ext: '.css'

}]

}

}

只配置了几个基本的参数,匹配原目录对应文件,指定生成css文件目录,通过

grunt sass:server

可以进行测试。

B.在 grunt.initConfig 中 grunt-contrib-watch 插件节点下配置监听,实现自动监测scss文件变化生成css

watch:{

sass: {

files: ['<%= yeoman.app %>/styles/scss/*.scss'],

tasks: ['sass:server']

}

}

指明监听目录和对应执行task即可。

这样自动监听 scss 文件生成 css 文件的环境就配置好了。然后就可以愉快的在

grunt serve

下进行 scss 的编写了。

[wenki](http://www.cnblogs.com/wenki/)

Grunt 使用记录的更多相关文章

  1. 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

    很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...

  2. grunt live reload 配置记录

    1.npm install --save-dev grunt-contrib-watch  安装 watch 2.安装chrome livereload 插件 3.配置Gruntfile.js wat ...

  3. grunt + sass 使用记录

    环境依赖 Nodejs for grunt Ruby for sass 配置文件 package.json { "name": "app", "ver ...

  4. grunt安装,配置记录

    进了新的公司,需要重构一个项目,从头开始.本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧.这次从新开始,未尝不是一个博客开始的好时机 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. [译]为什么我要离开gulp和grunt转投npm脚本的怀抱

    原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

  9. 前端资源构建-Grunt环境搭建

    前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服 ...

随机推荐

  1. 数据库如何生成sql语句

    以SQL SERVER 2008为例子. 1.启动客户端管理器,连接到要生成脚本的数据库. 2.在左边的”对象资源管理器“中,右键选择该数据库打开菜单.选择”任务“,”生成脚本“菜单,打开对话框. 3 ...

  2. OpenGL实现3D漫游的理解

    这篇文章主要参考以下两篇博客: 推导相机变换矩阵 OpenGL系列教程之五:OpenGL矩阵类 上面的第一篇是理论的讲解,第二篇有实例代码,我在后面会给出自己写的主函数,依赖的类可以从第二篇参考中下载 ...

  3. iOS图表库Charts集成与使用

    Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...

  4. MATLAB曲面插值及交叉验证

    在离散数据的基础上补插连续函数,使得这条连续曲线通过全部给定的离散数据点.插值是离散函数逼近的重要方法,利用它可通过函数在有限个点处的取值状况,估算出函数在其他点处的近似值.曲面插值是对三维数据进行离 ...

  5. Oracle连接与会话

    连接(connection):连接是从客户端到oracle数据库实例的一条物理路径. 会话(session):会话是数据库实例中存在的一个逻辑实体. case1:一个连接可以有多个会话 SQL> ...

  6. 【leetcode】Pascal's Triangle II

    题目简述: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Retur ...

  7. windows server 2008禁止ping

    在cmd命令行中通过ping一个主机名.域名或ip地址可以获取到该机器的ip.操作系统等很多信息,处于安全考虑,很多时候不希望服务器被ping,在windows server 2008 r2可以这样操 ...

  8. (转载)Win8.1的版本

    Win8.1版本到底有哪些? Windows 8.1的各版本有什么不同.差别和区别? Win8.1旗舰版有木有? Win8.1最好的版本是哪个? 我应该用哪个版本的Windows 8.1? 之前软媒曾 ...

  9. UWP学习记录11-设计和UI

    UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...

  10. LinkedHashMap源码阅读笔记(基于jdk1.8)

    LinkedHashMap是HashMap的子类,很多地方都是直接引用HashMap中的方法,所以需要注意的地方并不多.关键的点就是几个重写的方法: 1.Entry是继承与Node类,也就是Linke ...