jsde and gulp instructions

jade is a haml based on the html template engine, it has been changed to pug

Installation globally npm install jade -g

Create a new folder jade, build a file name suffix .jade of
editing .jade file

jade -P -w index.jade jade under the monitor file changes in folder, which generates html

index.jade file

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

DOCTYPE HTML HTML head Meta (charset = 'UTF-8') title my website body div | hehe A: img (src = '#') div (style = {width: "100px", height: "100px"}) test div div (class = 'test') I was kind of fame test div .test I was kind of fame test div #myid I called id myid of div .myclass # myids I also have a class of div id -var name = 'John Doe' div name is {name} # // is a comment I // I was a comment I Note 2 // - I am a jade Notes // - I was a jade comment Note 2 I jade UL -for (var I = 0; I <. 3; I ++) li li I cycle -var arr = [ "Bob", "small macro", "Pei"] for Val in ARR P {Val} # -var ARR = [{name: "Xiaohua", age: "20"} , {name: " Li Xin", Age: "10"}] for Val in ARR P is the name # {val. {name} age val.age} # -var obj = {name: "Princess", Age: "25"} for Item,obj in index P # {index} attribute property value is the Item} {# -var to true Judge = IF Judge the value of p judge is to true the else p judge the value to false -var NUM =. 3 Case NUM . 1 When P # {NUM} is equal. 1 When 2 P # {NUM} is equal to 2 When 3 P # {NUM} is equal to 3 large column   jsde and gulp Description "Line"> default P # {NUM} other values // - JS written . Script (type = 'text / JavaScript') the console.log ( "Hello") function test () { the console.log ( "I test function") } // - wrapper functions List a mixin UL -for (var I = 0; I <. 3;++ i) li I li miles content // - call the wrapper functions + list List + // - defined pet HTML a mixin PET (name, Sex) P pet name is # {name} pet Sex {gender} # // - call parameter passing + pet ( "rhubarb", "mother") + pet ( "small strong", "male")

jade basic syntax:

1. indent relationship, instead of the previous html hierarchical inclusion relationship, such as a simple static can be expressed as, pay attention to consistent use spaces to indent or tab, do not mix

2. Writing inline level, a: img

3.style属性：div(style={width:”200px”,color:”red”})

4. Use "-" to define a variable, using the "=" to the output variable element;

5 through # {variable} interpolated value corresponding variant

Element attributes 6.html by brackets to the right of the label comprising (by determination may be added)

7. text
by adding the word before the pipe symbol "|" is output as the content allows jade separated by spaces after the html tag label present in the html content label tag number is added by the addition block level present England. ""

8. Note: you can enter comments by the double slash

9. circulation

10. Analyzing the statement "if else" case when default

11.mixin wrapper function call, and

12.js writing, css writing

gulp use

gulp is based on the node Web front-end automation tool to achieve development, it can greatly improve development efficiency. You can also do a lot of things gulp

1. CSS compression
2. Figure compression
3. Compile Sass / LESS
4. CoffeeScript compiler
5. markdown converted to HTML
   6. The compressed combined js

Use gulp to compress 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配置文件里就会有者两个模块

4.在gulpfile.js里面引入gulp模块

5.在gulpfile.js里面创建压缩任务：下面我们创建两个压缩任务：js和css

创建压缩任务：gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务 内容。
gulp.src(path) - 选择文件，传入参数是文件路径。
gulp.dest(path) - 输出文件
gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

6.监听文件修改：

监听文件修改：gulp.task(‘auto’, function () {
// 监听文件修改，当文件被修改则执行 script 任务 gulp.watch(‘js/*.js’, [‘script’])
})

7.终端进入gulp路径下，输入命令：

gulp mytask

gulp auto

就能实时监控app文件夹下的js文件和css文件，当文件内容有变化时，会自动在build文件夹下生成压缩后的文件