jade 使用
jade 是一款基于 haml 的 html 模板引擎,已改为 pug
1. 全局安装 npm install jade -g
新建一个 jade 文件夹,再建一个后缀名为. jade 的文件
编辑. jade 文件
jade -P -w index.jade 在文件夹 jade 下监听文件变化,即生成 html
index.jade 文件
doctype html
html
head
meta(charset='utf-8')
title 我的网站
body
div
|hehe
a: img(src='#')
div(style={width:"100px",height:"100px")
测试 div
div(class='test') 我是类名位test的div
.test 我是类名位test的div
#myid 我是id名为myid的div
.myclass#myids 我是有id也有class的div
-var name='张三'
div
名字是#{name}
// 我是注释
//
我是注释一
我是注释二
//- 我是jade注释
//-
我是jade注释一
我是jade注释二
ul
-for(var i=0;i<3;i++)
li 我是循环的li
-var arr = ["小明","小宏","夏培"]
for val in arr
p #{val}
-var arr = [{name:"小华",age:"20",{name:"李欣",age:"10"]
for val in arr
p 姓名是 #{val.name} 年龄是 #{val.age}
-var obj = {name:"皇妃",age:"25"
for item,index in obj
p 属性是 #{index} 属性值是 #{item}
-var judge = true
if judge
p judge的值是true
else
p judge的值是false
-var num = 3
case num
when 1
p #{num}的值等于1
when 2
p #{num}的值等于2
when 3
p #{num}的值等于3
default
p #{num}是其他值
//- js写法
script(type='text/javascript').
console.log("你好")
function test(){
console.log("我是test函数")
}
//- 封装函数
mixin list
ul
-for(var i=0;i<3;i++)
li 我是li里地内容
//- 调用封装函数
+list
+list
//- 定义宠物的html
mixin pet(name,sex)
p 宠物的名字是 #{name}宠物的性别是 #{sex}
//- 传参调用
+pet("大黄","母")
+pet("小强","公")
jade 基本语法:
1. 通过缩进关系,代替以往 html 的层级包含关系,如 个简单的静态 可以表达为,注意要统一使用 tab 或者空格缩进,不要混用
2. 内联书写层级, a: img
3.style 属性:div(style={width:"200px",color:"red")
4. 使用 "-" 来定义变量,使用 "=" 把变量输出到元素内;
5. 通过 #{variable} 插 相应的变 值
6.html 元素属性通过在标签右边通过括号包含(可以通过判断来添加)
7. 文本
通过在 字前 添加竖线符号 "|" 可让 jade 原样输出内容 在 html 标签标记后 通过空格隔开 本内容 在 html 标签标记后通过添加英 号 "." 添加块级 本
8. 注释:可以通过双斜杠进 注释
图片. png
9. 循环
图片. png
10. 判断语句 "if else" case when default
图片. png
图片. png
11.mixin 封装函数以及调用
图片. png
12.js 写法,CSS 写法
图片. png
gulp 使用
gulp 是基于 node 实现 web 前端自动化开发的工具,它能够极大的提高开发效率.gulp 还可以做很多事
压缩 CSS
压缩图
编译 Sass/LESS
编译 CoffeeScript
markdown 转换为 html
6. 压缩合并 js
使用 gulp 来压缩 js
1. 在 jade 同级建立 gulp 文件夹, 再建立 gulpfile.js 配置文件
2. 在 gulp 路径下安装 gulp
sudo npm install gulp
3. 获取到压缩的 js 的模块 gulp-uglify 和压缩 css 的模块 gulp-minify-css
npm install gulp-uglify --save
npm install gulp-minify-css --save
这样我们 gulp 文件夹里地 package.json 配置文件里就会有者两个模块
图片. png
4. 在 gulpfile.js 里面引入 gulp 模块
图片. png
5. 在 gulpfile.js 里面创建压缩任务:下面我们创建两个压缩任务:js 和 css
创建压缩任务:gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务 内容.
gulp.src(path) - 选择文件,传入参数是文件路径.
gulp.dest(path) - 输出文件
gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列
图片. png
6. 监听文件修改:
监听文件修改:gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务 gulp.watch('js/*.js', ['script'])
})
图片. png
7. 终端进入 gulp 路径下,输入命令:
gulp mytask
gulp auto
就能实时监控 app 文件夹下的 js 文件和 css 文件,当文件内容有变化时,会自动在 build 文件夹下生成压缩后的文件
来源: http://www.jianshu.com/p/d83e2ef0eb6a