爱前端2016年9月17日gulp案例笔记

1班级：前端2期讲师：：@E-mail 复 第一 第二 第三 第四 获取 文件 Globs语 插 重命 压缩 压缩css插 压缩html插 文件合 Js代码检测工 作 Ng-appNg-bind简写{{}}插值指令，Ng-controllerNg-modelNg-init初始化数据（初始化在根作用域上）在angular是通过指令创建的vue1angular每个对应一个指Vue中每个都是通过v-on：指令创建2angular中每个回调函数定义在作用域Vue中每个回调函数定义在methods属性3angular作用域是Vue中作用域是vue实例化对4angular中回调函数中，为作用域定义数据有两种方式，$scope和thisVuethis来定义Ng-showTrue显示，falseNg-hideTrue隐藏，falseangularjs表达式，加减乘除，js的方法，js的三元表达式等等过滤器有时相对插入的数据处理的方法重复使用，我们可以通过过滤实现{{data|fliterparamsparams2| json数据uppercase将字符串转化大写lowercase将字符串转化成小写NumberFilterorderByDateyMdH24h12msE表示星期filter方法程序app提供的表单元素formnameForm中的每个表单元素（input，textarea等）name属性创建一个变量$dirty是否修改过True修改过False$pristine是否修改过True没有修改过False修改过$valid是否合法True合法False不合法$invalid是否不合法True不合法False合法必填项检测required，ng-required1(默认$valid2都是检测值是否为空1requiredh5的属性，因此浏览器识别，ng-required是angular2ng-required必须有值（true是必填），required可以不输入值长度检测maxlength，minlength，ng-maxlength，ng-minlength12都是在输入以后开始检测（默认$validtrue）maxlengthminlengthh5属性，浏览器识别，ng-maxlengthng-minlengthangular指令，浏览patternng-12都是在输入以后开始检测的1patternh5属性，浏览器识别，ng-pattern2pattern值是正则内容值，ng-patternNg-disabledFalseNg-readyonlyTrueFlaseNg-checkedTrueFalseNg-change表单元素内容改变时候的这个比较特殊，必须依赖ng-model，并且无法对Ng-submit表单元素提交时候的这 对Run程序启动时候的方法，提供的是一个根作用域Ng-href动态创建a上的href属Ng-srcsrcNg-class动态为元素添加类，有三种对象的属性值是一个boolean值，true表示保留，false表示删除Ng-stylecss样式，有两种添加方式第一种值是对象Ng-ifNg-switchOnNg-switch-defaultNg-switch-whenNg-repeat=“iteminlist$index0$first$last$even$odd$middle是否只中间一次（不是首位Ng-include动态加载模板（元素指令Directive应用程序app提供的方法 ECMAE自定义元素指令（不能定义w3cC类指令<divclass=”my-directive”></div>M注释指令directivemy-directiveA属性指令<divmy-Temte（temteUrl）表示自定义指令模板Rece是否删除指令元素ControllerScope作用没有temte模TrueFalse{}与父作用域，（元素内部插值变量使用的是父作用域的数据）有temte模板TrueFalse{}与父作用域@添加时候，属性值用插值符号（动态获取父作用域中的数据）=添加时候，属性值直接用父作用域中的变量Transclude一定要在模板中通过ng-transcludetranscludetrueLink函数为自定义指令提供功能ScopeJqliteAttrsCompileJqliteAttrslink一样每次创建指令时候都会执行一次，但是complelinkRequire添加时候是一个数组，数组会作为第四个参数传递给$timeout$interval循环定时器服务$apply(function()$httpUrl表示请求的地址Paramsurl添加参数Datapost传递数据MethodGETPOSTSuccess请求成功时候的回调函数Then允诺对象的标准方法Error请求失败时候的回调函数Getget请求的简写方式Postpost请求的简写方式Factory服务工厂方法，返回值就是暴漏接口Service服务构造函数，通过this将接漏出来2类路由412ng-34Temte模板temteUrl外部模板Controller控制器OtherwiseredirectTo将其他路由地址重定向到默认路由下动态参数$routeParams$locationUi

4Url路由地址Temte内部模板temteUrl外部模ControllerViews$urlRouterProviderWhen重定向路由Otherwise设置默认路由动态参数具有一定类型的动态参数/{name:type} type可以是正则，可以是int，string，dateQuery参数?query1&query2queryQueryquery参数可有可无，动态参数必须添加ui-view定义子路由视图位置通过state方法名空间定义子路由UNIXnodestream流很像。stream流，对流文件的内容进行压缩处理stream流，将流写入文件 Npminstallggulpnpminstallhttp /gulp（gulp上面搜索，看他的源码Npm在当 中寻 Gulp使用必须创建一个gulpfile.js文件，这个文件是gulp文件，在gulp指令执行时候，会寻找这 Gulpnodegulpfile.jsnodegulp功能gulpnodegulp模块引入进来语法gulp.task(name,[deps],fn)NameFn是任务执行的回调函数（当前面的依赖任务执行完毕之后，会执行这个回调函数，如果没有依赖集语法gulp.run(name)gulp.task('show',gulp.task('show',function(fn) gulp.task('default',stream流，（流中包含文件的信息，比如文件名，文件内容等等）语法gulp.src（path）stream流转化文件，保存起来语法gulp.dest(path)Path语法.pipe(操作)12345123456gulp.task('dealjs',function()文件文件gulpwatch第一种watch(path,task)watch（pathfn）PathglobsFn的参数是一个对Path表示文件的路径1123456789//gulp.watch('src/demo.js',['dealjs',gulp.watch('src/demo.js',function()Globs**表示所有字符（包含路径分隔符[]字符集[^*.jsa.jsab.js*.*a.jsSrc/**.jssrc/a.jsa?b.jsacb.jsabb.js,amb.jsaccb.jsa[bcd]e.css匹配abe.css，ace.cssaxe.cssa[^bcd]e.css匹配axe.css不能匹配abe.css gulp.watch('src/**/*.js', gulp.watch('src/**/*.js',Gulp中插件官网上没有指明我们因该用哪个，咱们学习的这些事比较常见几个插件，工作中遇到问题要去社区gulp-rename（注意操作顺序）gulp.task('renamejs',gulp.task('renamejs',function() gulp.task('js',gulp.task('js',function()js css gulp.task('css',function()22345678htmlgulp.task('html',gulp.task('html',function()html Vue1123456gulp.task('deal',['uglifyJs','minifyHtml',gulp.task('deploy',['img','data',gulp.task('default',['deal',gulp-如果使用多个插件时候，