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

  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. HDU 3790最短路径问题 [最短路最小花费]

    题目链接:[http://acm.hdu.edu.cn/showproblem.php?pid=3790] 最短路径问题 Time Limit: 2000/1000 MS (Java/Others)  ...

  2. 【BZOJ 2323】 2323: [ZJOI2011]细胞 （DP+矩阵乘法+快速幂*）

    2323: [ZJOI2011]细胞 Description 2222年,人类在银河系外的某颗星球上发现了生命,并且携带了一个细胞回到了地球.经过反复研究,人类已经完全掌握了这类细胞的发展规律: 这种 ...

  3. 动态规划：部分和问题和数字和为sum的方法数

    很久之前看过这个题目,但是没有仔细整理,直到现在看基础才想到这两个题.这两个题非常经典也非常类似.接下来分别介绍. 部分和问题 题目描述 给定整数a1.a2........an,判断是否可以从中选出若 ...

  4. BZOJ1073 k短路（A*算法）

    A*算法,也叫启发式搜索,就是设计一个预估函数,然后在搜索的过程中进行有序的搜索,我们设到目前状态的花费为f(x),到目标状态的估计花费为h(x),那么我们按照h(x)+f(x)排序即可,这道题里起点 ...

  5. bzoj 3872: [Poi2014]Ant colony -- 树形dp+二分

    3872: [Poi2014]Ant colony Time Limit: 30 Sec  Memory Limit: 128 MB Description   There is an entranc ...

  6. PHP -- 8个必备的PHP功能开发

    原文出处:http://www.codeceo.com/8-php-functions.html 做过PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得 ...

  7. [转]ANDROID开发之SQLite详解

    SQLite简介 Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大.SQLite具备下列特点: 1.轻量级 使用 SQLit ...

  8. CentOS 6.9永久设置静态路由表以及路由表常用设置

    一.路由表常用设置: 1.使用route命令添加的路由,机器重启或者网卡重启后路由就失效了,方法: //添加到主机的路由 # route add –host 192.168.1.11 dev eth0 ...

  9. 使用OData快速构建REST服务

    OData是微软支持的一种查询标准,它的第四版使用了REST规范,看起来简洁多了.它的最大的特点是可以在客户端自行配制查询条件,使用它构建REST服务时再也不用担心查询的扩展性问题了. 如下是几个简单 ...

  10. X86调用约定 calling convention

    http://zh.wikipedia.org/wiki/X86%E8%B0%83%E7%94%A8%E7%BA%A6%E5%AE%9A 这里描述了在x86芯片架构上的调用约定(calling con ...