CSS的预处理框架stylus学习教程

    package.json：用于保存项目元数据。
    Gruntfile.js：用于配置或定义任务、加载 Grunt 插件。

package.json 内容

JavaScript Code复制内容到剪贴板

{   
  "name": "test",   
  "version": "1.0.0",   
  "description": "测试的例子",   
  "repository": {   
    "type": "git",   
    "url": ""  
  }   
}  

然后安装必备插件，这些插件让stylus文件变更了自动生成，生成到相对应的文件目录中。如果报错你需要在命令行前面加上sudo，给它最大的执行权限。

npm install grunt –save-dev
npm install grunt-contrib-watch –save-dev ：监视文件变动，做出相应动作。npm>>
npm install grunt-contrib-stylus –save-dev ：stylus编写styl输出css npm>>

安装出现这样的警告 npm WARN package.json test@1.0.0 No README data 可以不理会，如果你看着不舒服，你需要在stylusExample目录下面建立一个 README.md 文件并输入内容。也可命令执行 echo "#stylus 学习" >> README.md

插件执行完毕之后 package.json 文件变成了这样样子滴。

JavaScript Code复制内容到剪贴板

{   
  "name": "test",   
  "version": "1.0.0",   
  "description": "测试的例子",   
  "repository": {   
    "type": "git",   
    "url": ""  
  },   
  "devDependencies": {   
    "grunt": "^0.4.5",   
    "grunt-contrib-stylus": "^0.21.0",   
    "grunt-contrib-watch": "^0.6.1"  
  }   
}  

这个时候你需要使用这些插件儿完成你的任务需要在Gruntfile.js里面写你的执行任务。

JavaScript Code复制内容到剪贴板

/// 包装函数   
module.exports = function(grunt) {   
    // 任务配置,所有插件的配置信息   
    grunt.initConfig({   
        pkg: grunt.file.readJSON(‘package.json’),