[Grunt] Development Automation Tasks with Grunt
With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.
We build a grunt for watch any styl file changes,
if changed, then we compile to css files, and see if the css files changed we reload the page.
Install:
npm install grunt --save-dev
npm install grunt-contrib-stylus
npm install grunt-contrib-watch
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Grunt Stylus</title>
<link rel="stylesheet" href="app/css/app.css"/>
<script src="//localhost:35729/livereload.js"></script>
</head>
<body class="bg">
<h1>Grunt</h1>
<div>Here we are now!</div>
</body>
</html>
GruntFile:
/**
* Created by Answer1215 on 11/16/2014.
*/
module.exports = function(grunt) {
grunt.initConfig({
stylus:{
compile:{
options: {
compress: false
},
files: {
"app/css/app.css": "styl/app.styl"
}
}
},
watch:{
stylus:{
files: ['styl/**/*.styl'],
tasks: ['stylus:compile']
},
css:{
options: {livereload: true},
files: ['app/css/**.css']
},
html:{
options: {livereload: true},
files: ['**.html']
},
script: {
options: {livereload: true},
files: ['app/js/**.js']
}
}
}); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-stylus');
}
Read More:
https://github.com/gruntjs/grunt-contrib-stylus
https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
https://egghead.io/lessons/development-automation-tasks
[Grunt] Development Automation Tasks with Grunt的更多相关文章
- 【grunt第三弹】grunt在前端实际项目中的应用
前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...
- grunt入门讲解1：grunt的基本概念和使用
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...
- grunt入门讲解6：grunt使用步骤和总结
Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...
- Grunt实战 --- 通过nodejs和Grunt实现项目在线构建
本文主要说明,实现在线自动构建项目的实现方法.
- node & grunt path处理相关
在nodejs平台上写一些工具或者服务, 有很多需求会涉及到对目录或者文件路径的处理和操作.整理一些常用的处理path的方法 1.global __dirname Example: running n ...
- [Whole Web] [Node.js] [Browserify] [Grunt] Automation task with grunt-browserify & grunt-contrib-watch
What we want is when the server side Node.js files have been changed, we want to use browserify to b ...
- Grunt入门教程
引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...
- 基于Grunt构建一个JavaScript库
现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...
- 前端自动化grunt轻松入门
如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt! grunt是什么? grunt是一个非常好的自动化工具,你只管code ...
随机推荐
- PlayMaker布局技巧：预览GUI界面
PlayMaker布局技巧:预览GUI界面 PlayMaker提供丰富的动作用来构建界面.对于复杂界面,每次通过调试方式查看效果,会非常麻烦.这个时候,开发者可以考虑使用PlayMaker GUI ...
- openstack多region配置
实验 A机器 10.64.8.171 RegionOne B机器 10.64.8.142 RegionTwo Keytson(这个组件随便放在哪台都可以) openst ...
- UVA11019 Martix Matcher --- AC自动机
UVA11019 Martix Matcher 题目描述: 给定一个\(n*m\)的文本串 问一个\(x*y\)的模式串出现的次数 AC自动机的奇妙使用 将\(x*y\)的模式串拆分成x个串,当x个串 ...
- CodeForces - 1009E Intercity Travelling
题面在这里! 可以发现全是求和,直接拆开算贡献就好了 #include<bits/stdc++.h> #define ll long long using namespace std; c ...
- [CSAcademy]Squared Ends
[CSAcademy]Squared Ends 题目大意: 给你一个长度为\(n(n\le10^4)\)的数列\(\{A_i\}(A_i\le10^6)\).定义区间\(A_{[l,r]}\)的代价为 ...
- bzoj 4769: 超级贞鱼 -- 归并排序
4769: 超级贞鱼 Time Limit: 1 Sec Memory Limit: 128 MB Description 马达加斯加贞鱼是一种神奇的双脚贞鱼,它们把自己的智慧写在脚上——每只贞鱼的 ...
- 80.Vigenère密码（模拟）
Vigenère密码(文件名vigenere.cpp vigenere.in vigenere.out) 题目描述 Description 16 世纪法国外交家Blaise de Vigen ...
- HDU 5651 xiaoxin juju needs help 数学
xiaoxin juju needs help 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5651 Description As we all k ...
- PAT甲级1017. Queueing at Bank
PAT甲级1017. Queueing at Bank 题意: 假设一家银行有K台开放服务.窗前有一条黄线,将等候区分为两部分.所有的客户都必须在黄线后面排队,直到他/她轮到服务,并有一个可用的窗口. ...
- ubuntu 关闭n卡
ubuntu对n卡支持不好,电脑耗电和发汤,把它关闭掉 #sudo add-apt-repository ppa:bumblebee/stable#sudo apt-get update#su ...