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:

  1. npm install grunt --save-dev
  2. npm install grunt-contrib-stylus
  3. npm install grunt-contrib-watch

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>Grunt Stylus</title>
  6.     <link rel="stylesheet" href="app/css/app.css"/>
  7.     <script src="//localhost:35729/livereload.js"></script>
  8. </head>
  9. <body class="bg">
  10.     <h1>Grunt</h1>
  11.     <div>Here we are now!</div>
  12. </body>
  13. </html>

GruntFile:

  1. /**
  2.  * Created by Answer1215 on 11/16/2014.
  3.  */
  4. module.exports = function(grunt) {
  5.     grunt.initConfig({
  6.         stylus:{
  7.             compile:{
  8.                 options: {
  9.                     compress: false
  10.                 },
  11.                 files: {
  12.                     "app/css/app.css": "styl/app.styl"
  13.                 }
  14.             }
  15.         },
  16.         watch:{
  17.             stylus:{
  18.                 files: ['styl/**/*.styl'],
  19.                 tasks: ['stylus:compile']
  20.             },
  21.             css:{
  22.                 options: {livereload: true},
  23.                 files: ['app/css/**.css']
  24.             },
  25.             html:{
  26.                 options: {livereload: true},
  27.                 files: ['**.html']
  28.             },
  29.             script: {
  30.                 options: {livereload: true},
  31.                 files: ['app/js/**.js']
  32.             }
  33.         }
  34.     });
  35.  
  36.     grunt.loadNpmTasks('grunt-contrib-watch');
  37.     grunt.loadNpmTasks('grunt-contrib-stylus');
  38. }

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的更多相关文章

  1. 【grunt第三弹】grunt在前端实际项目中的应用

    前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...

  2. grunt入门讲解1：grunt的基本概念和使用

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...

  3. grunt入门讲解6：grunt使用步骤和总结

    Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...

  4. Grunt实战 --- 通过nodejs和Grunt实现项目在线构建

    本文主要说明,实现在线自动构建项目的实现方法.

  5. node & grunt path处理相关

    在nodejs平台上写一些工具或者服务, 有很多需求会涉及到对目录或者文件路径的处理和操作.整理一些常用的处理path的方法 1.global __dirname Example: running n ...

  6. [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 ...

  7. Grunt入门教程

    引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...

  8. 基于Grunt构建一个JavaScript库

    现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...

  9. 前端自动化grunt轻松入门

    如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt! grunt是什么? grunt是一个非常好的自动化工具,你只管code ...

随机推荐

  1. Bzoj2002/洛谷P3203 [HNOI2010]弹飞绵羊（分块）

    题面 Bzoj 洛谷 题解 大力分块,分块大小\(\sqrt n\),对于每一个元素记一下跳多少次能跳到下一个块,以及跳到下一个块的哪个位置,修改的时候时候只需要更新元素所在的那一块即可,然后询问也是 ...

  2. Xamarin.Forms教程开发Xamarin.Forms应用程序需要的工具

    开发Xamarin.Forms应用程序需要的工具 Xamarin.Forms教程开发Xamarin.Forms应用程序需要的工具,2014年5月8日在发布的Xamrin 3中引进了Xamarin.Fo ...

  3. [GCJ2017R3]Cooclement

    题目大意: 一种数列按照如下方式变化: 新数列第i位等于原数中数字i的出现次数. 变化过程中数列长度不变. 例如数列12的变化过程为12-11-20-01-10. 现在告诉你一个数列x,请求出x可能是 ...

  4. [bzoj1024][SCOI2009]生日快乐 (枚举)

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一 个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的 ...

  5. bzoj 3809 莫队

    收获: 1.分块时顺便记录每个位置所属的块,然后一次排序就OK了. 2.要权衡在“区间移动”与“查询结果”之间的时间,莫队算法一般区间移动频率远大于查询结果,所以我们选择的辅助数据结构时就要注意了,我 ...

  6. 四、python之 if while for

    一.if条件判断 if 条件判断: 逻辑操作…… …… else: 逻辑操作…… 其中"判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. ...

  7. 二、python的逻辑运算与数据类型

    .python的逻辑运算符 数学运算符 加:+   减:-  乘:*  除:/  取余:% 关系运算符 等于: ==  不等于: != 小于:< 大于:>     大于等于: >=  ...

  8. 九月回顾 这篇文章和ACM毫无关系= =

    其实不只是九月的回顾吧,我大概想把暑假到现在10.01发生的啥事儿都说下吧~ 嗯,我是一个比较沙茶的人,不过运气比较好吧. 高中啊,这个谈起来话就长了,在校什么风采之星大赛上,我认识了个妹子,当时感觉 ...

  9. hihocoder1322 树结构判定（161周）

    hihocoder1322 : 树结构判定(161周) 题目链接 思路: 无向图中判断是不是一棵树. 并查集判断.判断是不是只有一个连通分量.并且该联通分量中没有环.没有环的判定很简单就是看边的数目和 ...

  10. PAT甲级1021. Deepest Root

    PAT甲级1021. Deepest Root 题意: 连接和非循环的图可以被认为是一棵树.树的高度取决于所选的根.现在你应该找到导致最高树的根.这样的根称为最深根. 输入规格: 每个输入文件包含一个 ...