[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');
}