jade和gulp的语法

jade

jade的作用

Jade是一款基于haml的html模版引擎，采用Java cript实现，可以方便地 在Node.js、Yeoman等框架中使用，已改名为pug

jade的安装

• 全局安装 npm install jade -g
• 创建文件，后缀名为.jade
• 编译jade文件为html，jade test.jade，jade -P test.jade 不压缩html，jade -P -w test.jade 监听文件变化即生成html

jade语法

• jade语法：通过缩进关系，代替以往html的层级包含关系，如 个简单的静态 可以表达为，注意要统一使用tab或者空格缩进，不要混用
• 内联书写层级,a: img
• style属性：div(style={width:”200px”,color:”red”})
• 使用”-”来定义变量，使用“=”把变量输出到元素内；
• 通过 #{variable} 插 相应的变 值
• html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）
• 文本
  通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 在html标签标记后 通过空格隔开 本内容 在html标签标记后通过添加英 号“.”添加块级 本
• 注释：可以通过双斜杠进 注释，jade有3种注释 式，可以分别对应输出html 注释、 输出html注释、块级html注释
• 循环：each val in [1,2,3]
• 判断语句：”if else” case when default
• mixin：混合模式

gulp

gulp的作用

gulp：gulp 是基于 node 实现 Web 前端 动化开发的 具， 它能够极 的 提 开发效率。gulp 还可以做很多事 1. 压缩CSS，2. 压缩图，3. 编译Sass/LESS，4. 编译CoffeeScript，5. markdown 转换为 html， 6.压缩合并js

安装gulp：npm install gulp

• 使用gulp来压缩js
  1.建立文件夹，建立gulpfile.js配置文件，引入gulp模块
  2.获取到压缩js的模块uglify：npm install gulp-uglify --save；引入gulp-uglify模块
  3.创建压缩任务：gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务 内容。
  gulp.src(path) - 选择文件，传入参数是文件路径。
  gulp.dest(path) - 输出文件
  gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
  4.监听文件修改：gulp.task('auto', function () {
  // 监听文件修改，当文件被修改则执行 script 任务 gulp.watch('js/*.js', ['script'])
  })
• 使用gulp来压缩css
  请尝试安装gulp-minify-css来压缩css