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