Grunt 使用记录
想了解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 使用记录的更多相关文章
- 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获
很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...
- grunt live reload 配置记录
1.npm install --save-dev grunt-contrib-watch 安装 watch 2.安装chrome livereload 插件 3.配置Gruntfile.js wat ...
- grunt + sass 使用记录
环境依赖 Nodejs for grunt Ruby for sass 配置文件 package.json { "name": "app", "ver ...
- grunt安装,配置记录
进了新的公司,需要重构一个项目,从头开始.本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧.这次从新开始,未尝不是一个博客开始的好时机 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- [译]为什么我要离开gulp和grunt转投npm脚本的怀抱
原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 配置grunt进行css、js的检查、合并和压缩
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档 ...
- 前端资源构建-Grunt环境搭建
前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服 ...
随机推荐
- 【Android】设置android:maxLines="1"后,android:imeOptions="actionSearch"失效
android:singleLine在API LEVEL 3已经废弃,可以用android:maxLines="1"代替. 但是测试的时候发现设置android:maxLines= ...
- xposed XDA记录
[OFFICIAL] Xposed for Lollipop/Marshmallow [Android 5.0/5.1/6.0, v86, 2016/10/31] http://forum.xda-d ...
- Shell $? $* $@ 等含义
$0 ------>脚本名 $1 ------>传入的第一个参数值 $? ------>脚本执行的结果.成功==0,不成功==非0 $* ------>所有参数的内容 $@ - ...
- (转载)org.springframework.web.context.ContextLoaderListener
http://www.yihaomen.com/article/java/471.htm 刚才手贱乱点了下,然后好像jar包不见了还是什么的,出现了这个错误,按照帖子说的,手动添加maven进去就好了
- MySqlNDB使用自带的ndb_setup.py安装集群
在用Mysql做集群时,使用Mysql的NDB版本更易于集群的扩展,稳定和数据的实时性. 我们可以使用Mysql自带的工具进行集群安装与管理:ndb_setup.py.位于Mysql的安装目录bin下 ...
- android 蓝牙 http://blog.csdn.net/u012843100/article/details/52384219
http://blog.csdn.net/u012843100/article/details/52384219
- mvc file控件无刷新异步上传操作
前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
- Asp.net平台下网站性能调优的实战方案(转)
转载地址:http://www.cnblogs.com/chenkai/archive/2009/11/07/1597795.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错,所以写出来 ...
- 【Java EE 学习 79 下】【动态SQL】【mybatis和spring的整合】
一.动态SQL 什么是动态SQL,就是在不同的条件下,sql语句不相同的意思,曾经在“酒店会员管理系统”中写过大量的多条件查询,那是在SSH的环境中,所以只能在代码中进行判断,以下是其中一个多条件查询 ...
- C 标准库系列之ctype.h
ctype.h 主要提供了一些函数用以测试字符或字符处理的功能函数:包括字符判断检测.字符转换: 目前ASCII字符可分为以下一些类型,如:大写.小写.字母.数字.十六进制.空白字符.可打印字符.控制 ...