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');
}
![[Grunt] Development Automation Tasks with Grunt](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMzY0MjQxLzIwMTQxMS8xNzA1MjUzNDY3NTUzNDAuanBn.jpg?w=700&webp=1 "[Grunt] Development Automation Tasks with Grunt")
Read More:
https://github.com/gruntjs/grunt-contrib-stylus
https://github.com/gruntjs/grunt-contrib-watch#optionslivereload