1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 6 <title>Hx2çå客</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 8 <meta name="description" content="maybe..or"> 9<meta property="og:type" content="website"> 10<meta property="og:title" content="Hx2çå客"> 11<meta property="og:url" content="https://github.com/Hx2heng/index.html"> 12<meta property="og:site_name" content="Hx2çå客"> 13<meta property="og:description" content="maybe..or"> 14<meta name="twitter:card" content="summary"> 15<meta name="twitter:title" content="Hx2çå客"> 16<meta name="twitter:description" content="maybe..or"> 17 18 <link rel="alternative" href="/atom.xml" title="Hx2çå客" type="application/atom+xml"> 19 20 21 <link rel="icon" href="/favicon.png"> 22 23 <link rel="stylesheet" href="/css/style.css" type="text/css"> 24</head> 25<body> 26 <div id="container"> 27 <div class="left-col"> 28 <div class="overlay"></div> 29<div class="intrude-less"> 30 <header id="header" class="inner"> 31 <a href="/" class="profilepic"> 32 33 <img lazy-src="/img/head-pic.jpg" class="js-avatar"> 34 35 </a> 36 37 <hgroup> 38 <h1 class="header-author"><a href="/">é»ä¿¡æ¿</a></h1> 39 </hgroup> 40 41 42 43 44 <div class="switch-btn"> 45 <div class="icon"> 46 <div class="icon-ctn"> 47 <div class="icon-wrap icon-house" data-idx="0"> 48 <div class="birdhouse"></div> 49 <div class="birdhouse_holes"></div> 50 </div> 51 <div class="icon-wrap icon-ribbon hide" data-idx="1"> 52 <div class="ribbon"></div> 53 </div> 54 55 56 <div class="icon-wrap icon-me hide" data-idx="3"> 57 <div class="user"></div> 58 <div class="shoulder"></div> 59 </div> 60 61 </div> 62 63 </div> 64 <div class="tips-box hide"> 65 <div class="tips-arrow"></div> 66 <ul class="tips-inner"> 67 <li>èå</li> 68 <li>æ ç¾</li> 69 70 71 <li>å ³äºæ</li> 72 73 </ul> 74 </div> 75 </div> 76 77 78 <div class="switch-area"> 79 <div class="switch-wrap"> 80 <section class="switch-part switch-part1"> 81 <nav class="header-menu"> 82 <ul> 83 84 <li><a href="/">主页</a></li> 85 86 <li><a href="/archives">æææç« </a></li> 87 88 <li><a href="/tags/å端">åç«¯ææ¯</a></li> 89 90 <li><a href="/tags/å½éå±å¦">å½éå±å¦</a></li> 91 92 </ul> 93 </nav> 94 <nav class="header-nav"> 95 <div class="social"> 96 97 <a class="github" target="_blank" href="https://github.com/Hx2heng/" title="github">github</a> 98 99 <a class="weibo" target="_blank" href="http://weibo.com/justaboy/" title="weibo">weibo</a> 100 101 </div> 102 </nav> 103 </section> 104 105 106 <section class="switch-part switch-part2"> 107 <div class="widget tagcloud" id="js-tagcloud"> 108 <a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/JS/" style="font-size: 15px;">JS</a> <a href="/tags/js/" style="font-size: 10px;">js</a> <a href="/tags/å端/" style="font-size: 20px;">å端</a> <a href="/tags/å½éå±å¦/" style="font-size: 10px;">å½éå±å¦</a> <a href="/tags/ææ¯/" style="font-size: 20px;">ææ¯</a> <a href="/tags/çæ´»/" style="font-size: 10px;">çæ´»</a> 109 </div> 110 </section> 111 112 113 114 115 116 117 <section class="switch-part switch-part3"> 118 119 <div id="js-aboutme">é»ä¿¡æ¿ï¼å端ç¨åºåï¼å¸æä¸å¤§å®¶å ±åè¿æ¥ã</div> 120 </section> 121 122 </div> 123 </div> 124 </header> 125</div> 126 </div> 127 <div class="mid-col"> 128 <nav id="mobile-nav"> 129 <div class="overlay"> 130 <div class="slider-trigger"></div> 131 <h1 class="header-author js-mobile-header hide">é»ä¿¡æ¿</h1> 132 </div> 133 <div class="intrude-less"> 134 <header id="header" class="inner"> 135 <div class="profilepic"> 136 <img lazy-src="/img/head-pic.jpg" class="js-avatar"> 137 </div> 138 <hgroup> 139 <h1 class="header-author">é»ä¿¡æ¿</h1> 140 </hgroup> 141 142 <nav class="header-menu"> 143 <ul> 144 145 <li><a href="/">主页</a></li> 146 147 <li><a href="/archives">æææç« </a></li> 148 149 <li><a href="/tags/å端">åç«¯ææ¯</a></li> 150 151 <li><a href="/tags/å½éå±å¦">å½éå±å¦</a></li> 152 153 <div class="clearfix"></div> 154 </ul> 155 </nav> 156 <nav class="header-nav"> 157 <div class="social"> 158 159 <a class="github" target="_blank" href="https://github.com/Hx2heng/" title="github">github</a> 160 161 <a class="weibo" target="_blank" href="http://weibo.com/justaboy/" title="weibo">weibo</a> 162 163 </div> 164 </nav> 165 </header> 166 </div> 167</nav> 168 <div class="body-wrap"> 169 170 <article id="post-webpackä¸bootstrapçé åæ¹æ¡" class="article article-type-post" itemscope itemprop="blogPost"> 171 172 <div class="article-meta"> 173 <a href="/2017/02/24/webpackä¸bootstrapçé åæ¹æ¡/" class="article-date"> 174 <time datetime="2017-02-23T17:18:34.000Z" itemprop="datePublished">2017-02-24</time> 175</a> 176 </div> 177 178 <div class="article-inner"> 179 180 <input type="hidden" class="isFancy" /> 181 182 183 <header class="article-header"> 184 185 186 <h1 itemprop="name"> 187 <a class="article-title" href="/2017/02/24/webpackä¸bootstrapçé åæ¹æ¡/">éè¿webpack使ç¨èªå®ä¹bootstrapè§£å³æ¹æ¡</a> 188 </h1> 189 190 191 </header> 192 193 194 <div class="article-entry" itemprop="articleBody"> 195 196 <h3 id="å¦ä½æ´å¥½å°ä½¿ç¨èªå®ä¹çBootstrapï¼">å¦ä½æ´å¥½å°ä½¿ç¨èªå®ä¹çBootstrapï¼</h3><p>bootstrapå®ç½æä¾èªå®ä¹çæ¬çä¸è½½ï¼ç¨æ·åªè¦éæ©éè¦çç»ä»¶å°±è½ä¸è½½å¯¹åºççæ¬ã使¯ï¼è¿ç§åæ³å®å¨æ¯å¤ªç¹çäºãèä¸å¦ææä»¬æ³è¦æ¹ä¾¿éæ©æéç»ä»¶ï¼åæ³éè¿sass/lessä¿®æ¹bootstrapï¼è¦éè¿ä»ä¹æ¹å¼ï¼çæ¡å°±æ¯âbootstrap-loaderâï¼è¿ä¸ªæ¯å¯¹åºä¿®æ¹sassçï¼æ¬æåªè®²sassï¼è¿æä¸ªå¯¹åºlessçï¼å«âbootstrap-webpackâï¼ã</p> 197<h3 id="bootstrap-loaderç使ç¨">bootstrap-loaderç使ç¨</h3><p>bootstrap-loader ï¼ä»ååä¸çå¾åºä»æ¯ä¸ä¸ªå è½½å¨ï¼é åwebpack使ç¨çãå®è½ä½¿é¡µé¢å¼ç¨å°èªå®ä¹çæ¬çbootstrapã</p> 198<p>###1.å®è£ </p> 199<p>å®è£ âbootstrap-loaderâ</p> 200<pre><code>npm <span class="keyword">install</span> bootstrap-loader 201</code></pre><p>å®è£ æéä¾èµï¼</p> 202<pre><code>npm install --save-dev bootstrap-sass 203npm install --save-dev css-loader <span class="keyword">node</span><span class="identifier"></span><span class="title">-sass</span> resolve-url-loader sass-loader style-loader url-loader 204</code></pre><p>ä½ æå¯è½è¿éè¦å®è£ ï¼</p> 205<pre><code>npm install --<span class="built_in">save</span>-<span class="built_in">dev</span> imports-loader exports-loader 206npm install --<span class="built_in">save</span>-<span class="built_in">dev</span> postcss-loader 207</code></pre><p>###2.使ç¨<br>1.ç®åä½¿ç¨æ¹æ³ï¼</p> 208<pre><code><span class="keyword">
208import</span> <span class="string">'bootstrap-loader'</span> 209</code></pre><p>æ¤æ¶ä¼å¼ç¨å°å®æ´çbootstrapã</p> 210<p>注ï¼bootstrapå¼ç¨äºè¯¸å¦svgãttfçæä»¶ï¼æä»¥ä¹éè¦å¨webpack.config.jsé 置好对åºçå è½½å¨ï¼</p> 211<pre><code><span class="rules">{ <span class="rule"><span class="attribute">test</span>:<span class="value"> /\.scss$/, use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'postcss-loader'</span>, <span class="string">'sass-loader'</span>] </span></span></span>}, 212<span class="rules">{ <span class="rule"><span class="attribute">test</span>:<span class="value"> /\.css$/, use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'postcss-loader'</span>] </span></span></span>}, 213<span class="rules">{ 214<span class="rule"><span class="attribute">test</span>:<span class="value"> /\.woff2?(\?v=[<span class="number">0</span>-<span class="number">9</span>]\.[<span class="number">0</span>-<span class="number">9</span>]\.[<span class="number">0</span>-<span class="number">9</span>])?$/, 215use: <span class="string">'url-loader?limit=10000'</span>, 216</span></span></span>}, 217<span class="rules">{ 218<span class="rule"><span class="attribute">test</span>:<span class="value"> /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 219use: <span class="string">'file-loader'</span>, 220</span></span></span>} 221</code></pre><p>
2212.å¯èªå®ä¹çï¼</p> 222<p>é¦å å¨å ¥å£æä»¶åé¢å è½½âbootstrap-loaderâï¼æ¤æ¶ä¸ç¨å¨index.jséå<code>import 'bootstrap-loader'</code>ï¼:</p> 223<pre><code><span class="tag">entry</span>: { 224 <span class="attribute">index</span>: [<span class="string">'bootstrap-loader'</span>, <span class="string">'./index.js'</span>],<span class="comment">//webpackæ°ç»å½¢å¼å ¥å£æä»¶ä»¥æ°ç»æåä¸ä¸ªä½ä¸ºåºå£æä»¶</span> 225 <span class="attribute">test</span>: <span class="string">'./test.js'</span>, 226}, 227</code></pre><p>ç¶å卿 ¹ç®å½æ·»å .bootstraprcæä»¶ï¼å³æ¯bootstrapèªå®ä¹é ç½®æä»¶ï¼æä»¶å¯ä»¥ç¨ymlæè jsonæ ¼å¼ç¼åèªå®ä¹å±æ§ï¼å®æ´æ¡ä¾(ymlæ ¼å¼)ï¼</p> 228<pre><code><span class="attribute">bootstrapVersion</span>: <span class="string">3</span> 229 230<span class="http"><span class="attribute">useCustomIconFontPath</span>: <span class="string">false</span> 231 232<span class="sqf">styleLoaders: 233 - style 234 - css 235 - sass 236 237extractStyles: <span class="literal">false</span> 238 239styles: 240 241 <span class="preprocessor"># Mixins</span> 242 mixins: <span class="literal">true</span> 243 244 <span class="preprocessor"># Reset and dependencies</span> 245 normalize: <span class="literal">true</span> 246 print: <span class="literal">true</span> 247 glyphicons: <span class="literal">true</span> 248 249 <span class="preprocessor"># Core CSS</span> 250 scaffolding: <span class="literal">true</span> 251 <span class="built_in">type</span>: <span class="literal">true</span> 252 code: <span class="literal">true</span> 253 grid: <span class="literal">true</span> 254 tables: <span class="literal">true</span> 255 forms: <span class="literal">true</span> 256 buttons: <span class="literal">true</span> 257 258 <span class="preprocessor"># Components</span> 259 component-animations: <span class="literal">true</span> 260 dropdowns: <span class="literal">true</span> 261 button-groups: <span class="literal">true</span> 262 input-groups: <span class="literal">true</span> 263 navs: <span class="literal">true</span> 264 navbar: <span class="literal">true</span> 265 breadcrumbs: <span class="literal">true</span> 266 pagination: <span class="literal">true</span> 267 pager: <span class="literal">true</span> 268 labels: <span class="literal">true</span> 269 badges: <span class="literal">true</span> 270 jumbotron: <span class="literal">true</span> 271 thumbnails: <span class="literal">true</span> 272 alerts: <span class="literal">true</span> 273 progress-bars: <span class="literal">true</span> 274 media: <span class="literal">true</span> 275 <span class="built_in">list</span>-<span class="built_in">group</span>: <span class="literal">true</span> 276 panels: <span class="literal">true</span> 277 wells: <span class="literal">true</span> 278 responsive-embed: <span class="literal">true</span> 279 close: <span class="literal">true</span> 280 281 <span class="preprocessor"># Components w/ JavaScript</span> 282 modals: <span class="literal">true</span> 283 tooltip: <span class="literal">true</span> 284 popovers: <span class="literal">true</span> 285 carousel: <span class="literal">true</span> 286 287 <span class="preprocessor"># Utility classes</span> 288 utilities: <span class="literal">true</span> 289 responsive-utilities: <span class="literal">true</span> 290 291<span class="preprocessor">### Bootstrap scripts</span> 292scripts: 293 transition: <span class="literal">true</span> 294 alert: <span class="literal">true</span> 295 button: <span class="literal">true</span> 296 carousel: <span class="literal">true</span> 297 collapse: <span class="literal">true</span> 298 dropdown: <span class="literal">true</span> 299 modal: <span class="literal">true</span> 300 tooltip: <span class="literal">true</span> 301 popover: <span class="literal">true</span> 302 scrollspy: <span class="literal">true</span> 303 tab: <span class="literal">true</span> 304 affix: <span class="literal">true</span></span></span> 305</code></pre><p>妿æ³ç»ä¸å页é¢é ç½®ä¸ç¨ç.bootstraprcæä»¶æè 䏿³æ.bootstraprcæä»¶æ¾å¨æ ¹ç®å½ï¼å¯ä»¥ä¿®æ¹å ¥å£æä»¶çbootstrap-loaderçåç¼ï¼</p> 306<p>æ ¼å¼ï¼<strong><code>bootstrap-loader/lib/bootstrap.loader?configFilePath=[æä»¶ä½ç½®]/[æä»¶åå].[æä»¶ç±»å]!bootstrap-loader/no-op.js</code></strong></p> 307<p>eg:</p> 308<pre><code>entry: { 309 index: [`<span class="keyword">bootstrap</span>-loader/lib/<span class="keyword">bootstrap</span>.loader?configFilePath=<span class="label">${__dirname}</span>/.bootstraprc!<span class="keyword">bootstrap</span>-loader/<span class="keyword">no</span>-op.js`, './index.js'], 310 <span class="keyword">test</span>: './<span class="keyword">test</span>.js', 311} 312</code></pre><p>èèªå®ä¹æ ·å¼éè¦å¨.bootstraprcæ·»å é ç½®(æéè¦è®¾ç½®ï¼ä¸è®¾ç½®æ³¨éå°±å¯ä»¥):</p> 313<pre><code><span class="comment">
313//å¨Bootstrap variablesä¹åå è½½</span> 314<span class="string">preBootstrapCustomizations:</span> .<span class="regexp">/app/</span>styles<span class="regexp">/bootstrap/</span>pre-customizations.scss 315 316<span class="comment">//å¨Bootstrap variablesä¹åbootstrapä¹åå è½½</span> 317<span class="string">bootstrapCustomizations:</span> .<span class="regexp">/app/</span>styles<span class="regexp">/bootstrap/</span>customizations.scss 318 319<span class="comment">//å¨bootstrapä¹åå è½½</span> 320<span class="string">appStyles:</span> .<span class="regexp">/app/</span>styles/app.scss 321</code></pre><p>ãé<a href="http://v3.bootcss.com/customize/#less-variables" target="_blank" rel="external">bootstrap æ ·å¼åé表</a>ã</p> 322<p>bootstrap-loaderç宿¹æºç ï¼<a href="https://github.com/shakacode/bootstrap-loader">https://github.com/shakacode/bootstrap-loader</a>ï¼ä¸é¢ä¼ææ´å¤è§£å³æ¹æ¡ã</p> 323 324 325 </div> 326 327 <div class="article-info article-info-index"> 328 329 330 <div class="article-tag tagcloud"> 331 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 332 </div> 333 334 335 336 337 <div class="clearfix"></div> 338 </div> 339 340 </div> 341 342</article> 343 344 345 346 347 348 349 350 351 <article id="post-es6+express+ejs+webpack+sass+mongoDB" class="article article-type-post" itemscope itemprop="blogPost"> 352 353 <div class="article-meta"> 354 <a href="/2017/02/23/es6+express+ejs+webpack+sass+mongoDB/" class="article-date"> 355 <time datetime="2017-02-23T02:28:29.000Z" itemprop="datePublished">2017-02-23</time> 356</a> 357 </div> 358 359 <div class="article-inner"> 360 361 <input type="hidden" class="isFancy" /> 362 363 364 <header class="article-header"> 365 366 367 <h1 itemprop="name"> 368 <a class="article-title" href="/2017/02/23/es6+express+ejs+webpack+sass+mongoDB/">es6+express+ejs+webpack+sass+mongoDB é¨ç½²</a> 369 </h1> 370 371 372 </header> 373 374 375 <div class="article-entry" itemprop="articleBody"> 376 377 <p>项ç®å°åï¼<a href="https://github.com/Hx2heng/blogDemo">es6+express+ejs+webpack+sass+mongoDB</a></p> 378<h2 id="使ç¨">使ç¨</h2><pre><code>npm i <span class="comment">//å®è£ </span> 379npm start <span class="comment">//å¼å¯æå¡</span> 380npm <span class="keyword">run</span> dev <span class="comment">//å¼å模å¼</span> 381npm <span class="keyword">run</span> bulid <span class="comment">//åå¸</span> 382</code></pre><h2 id="项ç®ç®å½">项ç®ç®å½</h2><pre><code><span class="comment">--root</span> 383 |<span class="comment">--config //é ç½®æä»¶</span> 384 |<span class="comment">--middlewares //ä¸é´ä»¶</span> 385 |<span class="comment">--pubulic //éæèµæº</span> 386 |<span class="comment">--js</span> 387 |<span class="comment">--css/sass</span> 388 |<span class="comment">--images</span> 389 |<span class="comment">--router //è·¯ç±æ§å¶å¨</span> 390 |<span class="comment">--tools //å·¥å ·</span> 391 |<span class="comment">--lib</span> 392 |<span class="comment">--webpack.config.js</span> 393 |<span class="comment">--views //è§å¾æä»¶</span> 394 |<span class="comment">--components</span> 395 |<span class="comment">--package.json</span> 396 |<span class="comment">--...</span> 397</code></pre><h2 id="es6é¢è®¾ç½®">es6é¢è®¾ç½®</h2><p>使ç¨babel对es6è¿è¡è½¬æ¢ï¼</p> 398<p>ä¸è½½</p> 399<pre><code> <span class="string">"devDependencies"</span>: { 400<span class="string">"babel"</span>: <span class="string">"6.23.0"</span>, 401<span class="string">"babel-cli"</span>: <span class="string">"6.23.0"</span>, 402<span class="string">"babel-core"</span>: <span class="string">"6.23.1"</span>, 403<span class="string">"babel-loader"</span>: <span class="string">"6.4.0"</span>,<span class="comment">//webpackçbabel-loader</span> 404<span class="string">"babel-plugin-transform-es2015-modules-commonjs"</span>: <span class="string">"6.23.0"</span>,<span class="comment">
404//å 许使ç¨es6çmodules</span> 405<span class="string">"babel-preset-env"</span>: <span class="string">"1.2.1"</span>, 406<span class="string">"babel-preset-react"</span>: <span class="string">"6.23.0"</span>,<span class="comment">//æ¯æjsx转æ¢</span> 407<span class="string">"babel-preset-stage-0"</span>: <span class="string">"6.22.0"</span> 408} 409</code></pre><p>é ç½®å¯ä»¥ä¸åå¨.babelrcéï¼ç´æ¥åå¨package.json</p> 410<pre><code> <span class="string">"babel"</span>: { 411<span class="string">"presets"</span>: [ 412 <span class="string">"react"</span>, 413 <span class="string">"stage-0"</span> 414], 415<span class="string">"plugins"</span>: [ 416 <span class="string">"transform-es2015-modules-commonjs"</span> 417] 418} 419</code></pre><p>npm scriptç´æ¥è¿è¡babel-node</p> 420<pre><code><span class="string">"scripts"</span>: { 421<span class="string">"test"</span>: <span class="string">"echo \"</span><span class="keyword">Error</span>: <span class="keyword">no</span> <span class="keyword">test</span> specified\<span class="string">" && exit 1"</span>, 422<span class="string">"start"</span>: <span class="string">"babel-node tools/start"</span>,<span class="comment">//表示æ§è¡toolsæä»¶å¤¹çstartæä»¶ï¼æ§è¡ä¹åè¿è¡es6转ç </span> 423<span class="string">"dev"</span>: <span class="string">"supervisor -w tools,router,middlewares,config,views -- -r babel-register tools/dev"</span> 424} 425</code></pre><h2 id="es6_-_弿¥æä½_async/await_è¯æ³">es6 - 弿¥æä½ async/await è¯æ³</h2><p>async彿°å è®¸ä½ å忥忳飿 ·å»å弿¥æä½ï¼async彿°éé¢å ³é®åawaitå颿¥ä¸ä¸ªPromiseï¼æ¤æ¶å½æ°æ§è¡ä¼å¨awaitåçPromiseæ§è¡å®æåæä¼å¾ä¸æ§è¡ã</p> 426<p>举个ä¾åï¼å建æå¡å¨æ¯å¼æ¥æä½ï¼æä»¬éè¦å¨æå¡å¨åå»ºå®æåæå¸ç½®è·¯ç±ãé¦å å建æå¡å¨ï¼å¹¶æå®å å¨Promiseéé¢ï¼</p> 427<pre><code>let runServer = <span class="function"><span class="params">(app)</span>=></span>{ 428 <span class="keyword">return</span> <span class="keyword">new</span> Promise(resolve=>{ 429 var server = app.listen(<span class="string">'3000'</span>,<span class="function"><span class="params">()</span>=></span>{ 430 var host = server.address().address; 431 var port = server.address().port; 432 <span class="built_in">console</span>.log(<span class="string">'server running at http://%s:%s'</span>, host, port); 433 resolve(); 434 }) 435 }) 436} 437</code></pre><p>ç¶åå¨ä¸»ä½äºä»¶ä¸ï¼å弿¥æä½ï¼</p> 438<pre><code> <span class="keyword">let</span> appPro = <span class="keyword">async</span> ()=>{ 439 <span class="keyword">let</span> app = express(); 440 <span class="comment">//çå¾ å¯å¨æå¡ </span> 441 <span class="keyword">await</span> runServer(app); 442 <span class="comment">//å¯å¨è·¯ç±</span> 443 router(app); 444} 445</code></pre><p>æ¤æ¶ï¼è·¯ç± router() ä¼å¨æå¡å¨åå»ºå®æåæ§è¡ã</p> 446<h2 id="express_å°session_åå ¥Redis">express å°session åå ¥Redis</h2><pre><code><span class="keyword">import</span> session <span class="keyword">from</span> <span class="string">'express-session'</span>; 447<span class="keyword">import</span> connectRedis <span class="keyword">from</span> <span class="string">'connect-redis'</span>; 448 449<span class="keyword">let</span> sessionCfg = { 450 secret:<span class="string">'huangxinzheng'</span>, 451 resave:<span class="literal">true</span>,<span class="comment">//å³ä½¿ session 没æè¢«ä¿®æ¹ï¼ä¹ä¿å session å¼ï¼é»è®¤ä¸º trueï¼ï¼ä¸æ·»å æ¥é,ä¸åï¼</span> 452 saveUninitialized: <span class="literal">false</span>,<span class="comment">// 设置为 falseï¼å¼ºå¶å建ä¸ä¸ª sessionï¼å³ä½¿ç¨æ·æªç»å½</span> 453 cookie: { 454 maxAge: <span class="number">1000</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">24</span><span class="comment">// è¿ææ¶é´ï¼è¿æå cookie ä¸ç session id èªå¨å é¤</span> 455 } 456} 457 458 <span class="comment">//设置session,å°sessionåå¨ Redis ä¸</span> 459<span class="keyword">var</span> RedisStore = connectRedis(session); 460<span class="keyword">let</span> rs = <span class="keyword">new</span> RedisStore(); 461app.use(session(extend(<span class="literal">true</span>,{},serverCfg,rs))); 462</code></pre><h2 id="express_ä¸é´ä»¶ç使ç¨">express ä¸é´ä»¶ç使ç¨</h2><p>expressçä¸é´ä»¶å¾éè¦ï¼çè³å¯ä»¥è¯´expresså°±æ¯éè¿ä¸é´æ¥å®ç°åºç¨çãexpressæå¾å¤å¼æºä¸é´ä»¶å¯ä»¥ç»æä»¬ä¸è½½ä½¿ç¨ï¼æ¯å¦express-sessionï¼ãæä¸é´ä»¶æ¾è¿app.use()éå°±ä»£è¡¨æ¯æ¬¡æå¡å¨è¯·æ±é½ä¼ç»è¿è¿ä¸ªä¸é´ä»¶ï¼å设ä¸é´ä»¶æ²¡æåæ¢ä¸ä¸ä¸ªçæ åµä¸ï¼ãæä»¬ä¹å¯ä»¥èªå·±åä¸é´ä»¶ï¼å ¶å®ä¸é´ä»¶å°±æ¯ä¸ä¸ªå½æ°ï¼è¿ä¸ªå½æ°æ<code>req</code>ï¼<code>res</code>ï¼<code>next</code> ä¸ä¸ªåæ°ï¼åå«ä»£è¡¨è¯·æ±å¯¹è±¡ï¼ååºå¯¹è±¡ï¼ånextæ¹æ³ãæ§è¡nextæ¹æ³å¯è¿æ¸¡å½åä¸é´ä»¶ã</p> 463<p>åä¸ä¸ªè®°å½è®¿é®æ¬¡æ°çä¸é´ä»¶ï¼é åsessionè®°å½ä¸å¤©å ç¨æ·çè®¿é®æ¬¡æ°ï¼</p> 464<pre><code>
464let showReqTimes = (req,res,<span class="keyword">next</span>) =>{ 465<span class="keyword">if</span>(!req.session.reqTimes){ 466 req.session.reqTimes =<span class="number">1</span><span class="comment">;</span> 467 res.<span class="built_in">send</span>(<span class="string">'ä½ ç¬¬1次访é®äºæ¬ç½ç«'</span>)<span class="comment">;</span> 468}<span class="keyword">else</span>{ 469 req.session.reqTimes++<span class="comment">;</span> 470 res.<span class="built_in">send</span>(<span class="string">'<p>ä½ ç¬¬'</span>+req.session.reqTimes+<span class="string">'次访é®äºæ¬ç½ç«</p>'</span>)<span class="comment">;</span> 471} 472 473<span class="keyword">next</span>()<span class="comment">;//æ§è¡ä¸ä¸ä¸ªä¸é´ä»¶</span> 474} 475 476export <span class="keyword">default</span> showReqTimes 477</code></pre><p>å设æ¯è®°å½å¨è®¿é®â/âçæ¶åï¼</p> 478<pre><code><span class="literal">import</span> showReqTimes from <span class="string">'./showReqTimes.js'</span> 479app.<span class="literal">get</span>(<span class="string">'/'</span>, showReqTimes, (req, res) => {<span class="comment">//æ¤æ¶æ¯æ¬¡è®¿é®æ ¹ç®å½ä¹åé½ä¼è¿å ¥showReqTimesè¿ä¸ªä¸é´ä»¶</span> 480 <span class="comment">//do something..</span> 481}) 482</code></pre><h2 id="webpackæ°çæ¬çåæ³åå-Loader">webpackæ°çæ¬çåæ³åå-Loader</h2><p>webpack2.2è¾ä¸ä¸ä»£å¨è¯æ³æ¹é¢æäºååï¼ç¹å«æ¯loaderï¼</p> 483<pre><code>åå åæ³: 484<span class="tag">module</span>: <span class="rules">{ 485 <span class="rule"><span class="attribute">loaders</span>:<span class="value"> [{ 486 test: /\.css$/, 487 loader: <span class="string">'style!css'</span> 488 </span></span></span>}] 489} 490ç°å¨åæ³ï¼ 491 <span class="tag">module</span>: <span class="rules">{ 492 <span class="rule"><span class="attribute">rules</span>:<span class="value"> [{ 493 test: /\.css$/, 494 use: [ <span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] 495 </span></span></span>}] 496} 497</code></pre><p>loadersæ¹ä¸ºäºrulesï¼loaderæ¹ä¸ºäºuseãè¯ä¹ä¸æ´å 容æçè§£äºï¼â对ä¸åçæä»¶ç±»å使ç¨ä¸åçè§åâãwebpack è½å¥½ï¼ä½æ¯é ç½®çæ¶åå¾éº»ç¦ï¼æ´æ°äºæ°çæ¬ä¹åï¼åæ³ä¸ä¹ æ¯ï¼æ¥é乿¯è«åå ¶å¦ãå¼åçè¦ä¸è¾¹ç宿¹ææ¡£ï¼è±äºå¾å¤æ¶é´ï¼çæ¥è¦å¤è±ç¹æ¶é´å»éåºã</p> 498<h2 id="é®é¢&è§£å³">é®é¢&è§£å³</h2><h4 id="1-_supervisor_çå¬_es6_æä»¶">1. supervisor çå¬ es6 æä»¶</h4><p>supervisor é»è®¤çå¬ä¸ç»è¿å¤ççjsæä»¶ï¼æå¦ææ¯ç´æ¥çå¬es6è¯æ³çjsæä»¶ï¼é£ä¹ä¼åºç°è¯æ³éã</p> 499<p>æä»¥ï¼éç¨<code>babel-register</code>对es6æä»¶è¿è¡é¢è½¬æ¢ï¼å¹¶ä¸è®¾ç½®<code>supervisor</code>ï¼</p> 500<pre><code>supervisor -w tools,router <span class="comment">-- -r babel-register tools/start</span> 501</code></pre><p><code>supervisor</code>ç宿¹ææ¡£å¯åè§ :<a href="https://www.npmjs.com/package/supervisor" target="_blank" rel="external"> https://www.npmjs.com/package/supervisor</a></p> 502<h4 id="2-_ejs模æ¿å¼æä¸å页é¢å¼ç¨ä¸åæ ·å¼æä»¶">2. ejs模æ¿å¼æä¸å页é¢å¼ç¨ä¸åæ ·å¼æä»¶</h4><p>ejsæ¯æ¬¾ç®å好ç¨ç模æ¿å¼æï¼ä½æ¯ç½ä¸å¾å¤äººè¯´ejså¨ä¸åç页é¢å¼ç¨ä¸åçæä»¶é叏䏿¹ä¾¿ï¼æäººç»åºå¨res.localsç»æ¨¡æ¿ä¼ åçæ¹æ³ï¼æé¡µé¢çå¼ç¨æ ·å¼æä»¶ä»åå°ä¼ ç»æ¨¡æ¿å¼æè¿è¡è§£æã个人æè§ä½æ¯è¿ç§æ¹æ³ä¸å¦¥ï¼ç®¡çèµ·æ¥ä¸æ¹ä¾¿ï¼æ ·å¼æä»¶å°±åºè¯¥åå¨è§å¾é¡µé¢ï¼ä¸åºè¯¥å¨è·¯ç±éé¢åã</p> 503<p>å ¶å®å¯ä»¥éè¿ejsçincludeè§£å³è¿ä¸ªé®é¢ã</p> 504<p>ejs2.0+çinclude彿°å·²ç»æ¯æä¼ ååè½ãå©ç¨è¿ä¸ªç¹æ§æä»¬å¯ä»¥ç®åå®ç°ejs模æ¿å¼æä¸å页é¢å¼ç¨ä¸åæ ·å¼æä»¶äºãå ·ä½å®ç°ï¼</p> 505<p>å¨é¦é¡µçè§å¾ä¸å¾headeréé¢ç©¿åæ°ï¼</p> 506<pre><code><span class="xml"></span><%-<span class="ruby"> <span class="keyword">include</span>(<span class="string">'layouts/header'</span>,{<span class="symbol">styles:</span>[<span class="string">'index'</span>,<span class="string">'jquery'</span>]}) </span>%><span class="xml"></span> 507</code></pre><p>ç¶åå¨headerçè§å¾ä¸ä¿®æ¹å¼ç¨æ ·å¼ï¼</p> 508<pre><code><span class="xml"> </span><%<span class="perl"> <span class="keyword">
508for</span>(var i=<span class="number">0</span>; i<styles.<span class="keyword">length</span>; i++) {</span>%><span class="xml"> 509 <span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"/css/</span></span></span><%=<span class="perl"> styles[i] </span>%><span class="xml"><span class="tag"><span class="value">.css"</span>></span> 510</span><%<span class="perl"> } </span>%><span class="xml"></span> 511</code></pre><h4 id="3-_server-address()-address_è·åå°IPv6æ ¼å¼ç主æºå°åâ::âï¼">3. server.address().address è·åå°IPv6æ ¼å¼ç主æºå°åâ::âï¼</h4><p>ä»¥ä¸ºå¦æè®¡ç®æºé»è®¤å¯ç¨äºIPv6ï¼é£ä¹ server.address().address è·åå°çå°±æ¯IPv6çå°åãå¦ä¸ï¼</p> 512<pre><code><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>); 513<span class="keyword">var</span> app = express(); 514<span class="keyword">var</span> server = app.listen(<span class="number">3000</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>
514) </span>{ 515 <span class="keyword">var</span> host = server.address().address; 516 <span class="keyword">var</span> port = server.address().port; 517 <span class="built_in">console</span>.log(<span class="string">'running at http://'</span> + host + <span class="string">':'</span> + port) 518}); 519 520resï¼<span class="string">'server running at http://:::3000'</span> 521</code></pre><p>妿æ³å¾å°IPv4ç主æºå°åï¼è¯·æ¾å¼å¾ç»listenä¼ é主æºåï¼</p> 522<pre><code><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>); 523<span class="keyword">var</span> app = express(); 524<span class="keyword">var</span> server = app.listen(<span class="number">3000</span>,<span class="string">'localhost'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ 525 <span class="keyword">var</span> host = server.address().address; 526 <span class="keyword">var</span> port = server.address().port; 527 <span class="built_in">console</span>.log(<span class="string">'running at http://'</span> + host + <span class="string">':'</span> + port) 528}); 529 530resï¼<span class="string">'server running at http://127.0.0.1:3000'</span> 531</code></pre><h4 id="4-_browser-sync_ä¸_webpack-dev-middleware_çé åï¼">4. browser-sync ä¸ webpack-dev-middleware çé åï¼</h4><pre><code><span class="keyword">const</span> bundler = webpack(webpackCfg); 532<span class="keyword">const</span> wpdm = webpackDevMiddleware(bundler,{ 533 publicPath: webpackCfg.output.publicPath 534}); 535 536<span class="keyword">let</span> handleBundleComplete = async () => { 537 <span class="keyword">if</span>(!app){ 538 await appPro().then(exApp=>{app = exApp}); 539 <span class="comment">//app.use(wpdm)</span> 540 <span class="comment">//å¯å¨ browser-sync</span> 541 bs = browserSync.create(); 542 bs.init({ 543 files: path.resolve(__dirname, <span class="string">'../public/*/**'</span>),<span class="comment">//çå¬ç®å½</span> 544 proxy: { 545 target: serverCfg.host+<span class="string">':'</span>+serverCfg.port, 546 middleware:[wpdm] 547 }, 548 open: <span class="keyword">false</span>, 549 reloadOnRestart: <span class="keyword">true</span> 550 },resolve); 551 }<span class="keyword">else</span>{ 552 bs.reload(); 553 } 554 555}; 556bundler.plugin(<span class="string">'done'</span>, () => handleBundleComplete()); 557</code></pre><p>å ·ä½æµç¨ï¼</p> 558<ul> 559<li>1.å webpackçæbundlerï¼æ¤é¶æ®µå¹¶ä¸æ§è¡çæï¼</li> 560<li>2.ç¨webpack-dev-middlewareæbundlerå æä¸é´ä»¶wpdm</li> 561<li>3.ç¬¬ä¸æ¥çæbundleræååå¯å¨æå¡å¨</li> 562<li>4.å¯å¨æå¡å¨æååå建并åå§åbrowser-sync</li> 563<li>5.ç¬¬äºæ¥çæçä¸é´ä»¶wpdmç»å°browser-syncä¸é´ä»¶è®¾ç½®</li> 564<li>6.æ¯æ¬¡è§¦åbrowser-syncçæ¶å齿§è¡ä¸é´ä»¶wpdm</li> 565<li>7.ç¬¬ä¸æ¬¡ä¹åçä¸é´ä»¶wpdmæ§è¡é½ä¸ç¨åå¯å¨æå¡å¨åå建browser-syncï¼åªæ¯æ§è¡browser-syncçreloadäºä»¶</li> 566</ul> 567 568 569 </div> 570 571 <div class="article-info article-info-index"> 572 573 574 <div class="article-tag tagcloud"> 575 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 576 </div> 577 578 579 580 581 <div class="clearfix"></div> 582 </div> 583 584 </div> 585 586</article> 587 588 589 590 591 592 593 594 595 <article id="post-webpackå®ç°HMRçå è½½" class="article article-type-post" itemscope itemprop="blogPost"> 596 597 <div class="article-meta"> 598 <a href="/2017/01/11/webpackå®ç°HMRçå è½½/" class="article-date"> 599 <time datetime="2017-01-11T06:38:54.000Z" itemprop="datePublished">2017-01-11</time> 600</a> 601 </div> 602 603 <div class="article-inner"> 604 605 <input type="hidden" class="isFancy" /> 606 607 608 <header class="article-header"> 609 610 611 <h1 itemprop="name"> 612 <a class="article-title" href="/2017/01/11/webpackå®ç°HMRçå è½½/">webpackå®ç°HMRçå è½½</a> 613 </h1> 614 615 616 </header> 617 618 619 <div class="article-entry" itemprop="articleBody"> 620 621 <p>âçæ¨¡åæ¿æ¢â(HMR)æ¯å¨æä¸ªåè½æ´»å¨è¿è¡æ¶æ³¨å ¥æ´æ°ç模åã</p> 622<pre><code>å°±å对æ¯ä¸ä¸ªæ¨¡åè¿è¡LiveReload 623</code></pre><p>ä¹å°±æ¯è¯´ï¼å¨å¼åè¿ç¨ä¸ï¼æä»¬ä¸ç¨å·æ°é¡µé¢ï¼å°±è½å®ç°å±é¨çæ´æ°ï¼æ 论æ¯css代ç ï¼è¿æ¯js代ç ã</p> 624<h2 id="webpackå®ç°HMRçå è½½">webpackå®ç°HMRçå è½½</h2><p>å®ç°webpack HMRéè¦éè¿webpackç两个ä¸é´ä»¶ï¼å³<code>webpack-dev-middleware</code>å<code>webpack-hot-middleware</code>ã</p> 625<p><strong><a href="https://github.com/webpack/webpack-dev-middleware">webpack-dev-middleware</a></strong>æ¯ä»ä¹ï¼</p> 626<blockquote> 627<p>The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle.</p> 628</blockquote> 629<p>å¯ä»¥çåº<code>webpack-dev-middleware</code>æ¯ä¸ä¸ªä¸é´ä»¶ï¼è´è´£æwebpackæå çbundle<strong>
629çæå¨å åä¸ï¼èä¸å¨ç£çé</strong>ï¼èä¸å¨å ¶çæç¨³å®çå ä¹åï¼<strong>ç¼è¯å°è¢«é»å¡</strong>ï¼ä½¿ç½é¡µæ´æ°æè²ä¼¼ç½ç»å»¶è¿çææï¼ï¼å¦æ¤ä¸æ¥æä»¬å°±ä¸éè¦å»å ³å¿ç¼è¯æ¯å¦å®æäºã</p> 630<p><strong><a href="https://github.com/glenjamin/webpack-hot-middleware">webpack-hot-middleware</a></strong>æ¯ä»ä¹ï¼</p> 631<blockquote> 632<p>This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpackâs HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.</p> 633</blockquote> 634<p><code>webpack-dev-middleware</code>ç¨æ¥å¨æµè§å¨å®¢æ·ç«¯åwebpackæå¡ç«¯è¿è¡è¿æ¥ï¼ç嬿å¡ç«¯æ¹åçæä»¶ï¼ç¶å<br>å®ç°æµè§å¨å®¢æ·ç«¯ççå è½½ã</p> 635<hr> 636<p>æåäºä¸ª <a href="https://github.com/Hx2heng/Webpack-HMR-demo">ä¾å</a> ç®åå®ç°äºHMRã</p> 637<p>é¦å ï¼å å®è£ npm模åï¼è¿éæä»¬ç¨expressä½ä¸ºæå¡å¨ï¼ï¼</p> 638<pre><code>npm i express webpack webpack-<span class="built_in">dev</span>-middleware webpack-hot-middleware --<span class="built_in">save</span>-<span class="built_in">dev</span> 639</code></pre><p>ç¶åï¼ç¼åwebpack.config.js:</p> 640<pre><code><span class="comment">//å¢å ä¸ä¸ªæä»¶ï¼å¹¶å¨å ¥å£æä»¶åå¢å 䏿®µä»£ç </span> 641<span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>), 642 webpack =<span class="built_in">require</span>(<span class="string">'webpack'</span>); 643<span class="keyword">var</span> config = { 644 entry: 645 [<span class="string">"./src/a.js"</span>, 646 <span class="string">'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'</span>, 647 ], 648 output: { 649 path: path.resolve(__dirname, <span class="string">'./output/'</span>), 650 filename:<span class="string">'bundle.js'</span>, 651 }, 652 plugins: [ 653 <span class="keyword">new</span> webpack.optimize.OccurrenceOrderPlugin(), 654 <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(), 655 <span class="keyword">new</span> webpack.NoEmitOnErrorsPlugin() 656 ] 657} 658 659<span class="built_in">module</span>.exports = config; 660</code></pre><p>ç¶åç»expressé ç½®ä¸é´ä»¶:</p> 661<pre><code><span class="keyword">var</span> express = <span class="keyword">require</span>(<span class="string">'express'</span>), 662 app = express(), 663 webpack = <span class="keyword">require</span>(<span class="string">'webpack'</span>), 664 config = <span class="keyword">require</span>(<span class="string">'./webpack.config.js'</span>), 665 webpackDevMiddleware = <span class="keyword">require</span>(<span class="string">'webpack-dev-middleware'</span>), 666 webpackHotMiddleware = <span class="keyword">require</span>(<span class="string">'webpack-hot-middleware'</span>); 667 668 669<span class="comment">//妿æåè°å½æ°å¹¶ä¸æ²¡æä¸é´ä»¶æä»¶åç´æ¥è¿è¡webpackãå¦ææ²¡æåè°å½æ°ææ²¡æä¸é´ä»¶æä»¶åä¸ç´æ¥æ§è¡webpackã</span> 670<span class="keyword">var</span> compiler = webpack(config, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{ 671 console.log(<span class="string">'done'</span>) 672}); 673 674<span class="comment">/*è¿é设置bundleçæä½ç½®ï¼æ³¨ææ¯çæå¨å åä¸ï¼ç±äºæä»¬è®¾ç½®äºéæç®å½'output'ï¼ 675æä»¥è¿éå®é ä¸çç½ç»ä½ç½®æ¯localhost:8080/ï¼æä»¶ä½ç½®æ¯ æ ¹ç®å½/output */</span> 676<span class="keyword">var</span> options = { 677 publicPath: <span class="string">"/"</span>, 678} 679 680app.<span class="keyword">
680use</span>(webpackDevMiddleware(compiler, options)); 681app.<span class="keyword">use</span>(webpackHotMiddleware(compiler)); 682app.<span class="keyword">use</span>(express.<span class="keyword">static</span>(<span class="string">'output'</span>)) 683app.listen(<span class="number">8080</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{ 684 console.log(<span class="string">'Example app listening on!'</span>) 685}) 686</code></pre><p>æåå¨éè¦çå è½½çæä»¶ä¸å å ¥ï¼æ¡ä¾ä¸æ¯a.jsï¼ï¼</p> 687<pre><code><span class="keyword">if</span> (<span class="class"><span class="keyword">module</span>.<span class="title">hot</span>) {</span> 688 <span class="class"><span class="keyword">module</span>.<span class="title">hot</span>.<span class="title">accept</span>();</span> 689} 690</code></pre><p>åå¤å°±ç»ªï¼è¿è¡ï¼</p> 691<pre><code><span class="built_in">npm</span> start 692</code></pre><p>æµè§å¨æå¼<code>localhost:8080</code> ï¼ä¼çå°æ§å¶å°è¾åº</p> 693<blockquote> 694<p>[HMR] connected</p> 695</blockquote> 696<p>代表çå è½½è¿æ¥æäºï¼ </p> 697<p>æä»¬ç¹å»æé®ï¼å¼¹åº1ãæ¤æ¶æä»¬å°è¯ä¿®æ¹b.jsï¼æ<code>alert(1)</code>æ¹ä¸º<code>alert(2)</code>ï¼åå°æµè§å¨ï¼åç°æµè§å¨å¹¶æ²¡æå·æ°ï¼å次ç¹å»æé®ï¼å¼¹åºäº2ï¼æµè§å¨å¨ä¸å·æ°çæ åµä¸ï¼æ´æ°äºjsæä»¶ï¼</p> 698 699 700 </div> 701 702 <div class="article-info article-info-index"> 703 704 705 <div class="article-tag tagcloud"> 706 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 707 </div> 708 709 710 711 712 <div class="clearfix"></div> 713 </div> 714 715 </div> 716 717</article> 718 719 720 721 722 723 724 725 726 <article id="post-ç»éªå享-ç½é¡µå¨æä¹Canvasç¯" class="article article-type-post" itemscope itemprop="blogPost"> 727 728 <div class="article-meta"> 729 <a href="/2016/08/23/ç»éªå享-ç½é¡µå¨æä¹Canvasç¯/" class="article-date"> 730 <time datetime="2016-08-23T02:28:29.000Z" itemprop="datePublished">2016-08-23</time> 731</a> 732 </div> 733 734 <div class="article-inner"> 735 736 <input type="hidden" class="isFancy" /> 737 738 739 <header class="article-header"> 740 741 742 <h1 itemprop="name"> 743 <a class="article-title" href="/2016/08/23/ç»éªå享-ç½é¡µå¨æä¹Canvasç¯/">ç»éªå享-ç½é¡µå¨æä¹Canvasç¯</a> 744 </h1> 745 746 747 </header> 748 749 750 <div class="article-entry" itemprop="articleBody"> 751 752 <p>å¨å¤çå¤å ç´ å¨æçæ¶åç¨æä½DOMçæ¹æ³ä¼ä¸¥éå ç¨å åï¼ææ ¢è¿è¡éåº¦ï¼æä»¥åºè¯¥ç¨Canvasç»å¸å¶ä½å¤å ç´ ç卿æè 游æã</p> 753<p>Canvasæ¯HTML5çæ°æ ç¾ãç¨äºç»å¶å¾åï¼éè¿èæ¬ï¼éå¸¸æ¯ JavaScriptï¼ï¼ä¸è¿ï¼canvaså ç´ æ¬èº«å¹¶æ²¡æç»å¶è½åï¼å®ä» ä» æ¯å¾å½¢ç容å¨ï¼ã</p> 754<p>Canvasæä¾çåè½æ´åå§ï¼éååç´ å¤çï¼å¨ææ¸²æåå¤§æ°æ®éç»å¶ã</p> 755<p>æåäºä¸ä¸ªå¼¹å¼å°é¸ç游æï¼ç¨çæ¯JavaScript+Canvasï¼éé¢å å«å¤§é¨åCanvasçç¨æ³ï¼ä»¥åé¢å对象çJavaScriptåæ³ï¼</p> 756<p><img src="https://raw.githubusercontent.com/Hx2heng/SlingShot/master/images/code.png" alt=""></p> 757<p>ï¼ææºæ«ä¸æ«æ¥çdemoï¼æåªåäºtouchäºä»¶ï¼æä»¥åªè½å¨ææºä¸ç©ï¼æè çµèå¼åè æ¨¡å¼æ¨¡æææºãï¼</p> 758<p>é¡¹ç® <a href="https://github.com/Hx2heng/SlingShot">æºç å°å</a></p> 759<hr> 760<p>该游æä¼åè¿ï¼å³ä½¿åºç°è¶ 大éçå ç´ ä¹ä¸ä¼å¡ï¼</p> 761<p><img src="https://raw.githubusercontent.com/Hx2heng/SlingShot/master/images/show.jpg" alt=""></p> 762<p>ä¼åéè¿å é¤åä½å¯¹è±¡ãå»é¤setIntervalæ¹ä¸ºrequestAnimationFrameä½ä¸ºå®æ¶å¨ãè¿æå°±æ¯è§èçæ¸¸æçå¼å模å¼ã</p> 763<hr> 764<p>requestAnimationFrameä½ä¸ºå®æ¶å¨ï¼</p> 765<pre><code>interval: <span class="keyword">function</span>() { 766 var <span class="variable">$this</span> = this; 767 this.timer = requestAnimationFrame(function() {
768 <span class="variable">$this</span>.render(); 769 //æ¸¸ææ¶é´ç¨å®ç»æ 770 if (<span class="variable">$this</span>.usedTime < <span class="variable">$this</span>.time) { 771 <span class="variable">$this</span>.timer = requestAnimationFrame(arguments.callee); 772 } else { 773 <span class="variable">$this</span>.over(); 774 } 775 }); 776} 777</code></pre><hr> 778<p>åªè¦å¦ä¼äºè¿ä¸ªï¼å¹¶è½èªå·±äº²æååºä¸ä¸ªè¿æ ·ç游æï¼é£ä¹ä½ çcanvaså°±å¯ä»¥äºã</p> 779 780 781 </div> 782 783 <div class="article-info article-info-index"> 784 785 786 <div class="article-tag tagcloud"> 787 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 788 </div> 789 790 791 792 793 <div class="clearfix"></div> 794 </div> 795 796 </div> 797 798</article> 799 800 801 802 803 804 805 806 807 <article id="post-gulp" class="article article-type-post" itemscope itemprop="blogPost"> 808 809 <div class="article-meta"> 810 <a href="/2016/05/11/gulp/" class="article-date"> 811 <time datetime="2016-05-11T06:38:54.000Z" itemprop="datePublished">2016-05-11</time> 812</a> 813 </div> 814 815 <div class="article-inner"> 816 817 <input type="hidden" class="isFancy" /> 818 819 820 <header class="article-header"> 821 822 823 <h1 itemprop="name"> 824 <a class="article-title" href="/2016/05/11/gulp/">gulp command not found - error after installing gulp</a> 825 </h1> 826 827 828 </header> 829 830 831 <div class="article-entry" itemprop="articleBody"> 832 833 <p>First,</p> 834<p>Be sure that you have gulp and gulp.cmd (use windows search )</p> 835<p>Then,</p> 836<p>Copy the path of gulp.cmd ( C:\Users\XXXX\AppData\Roaming\npm)</p> 837<p>Add this path to the Path envirement variable.</p> 838<p><strong><em>*OR</em></strong></p> 839<p>Edit âPATHâ environment variable and add %APPDATA%\npm<br>(Add %APPDATA%\npm to front of Path, not end of the Path.)</p> 840<p>finally,</p> 841<p>reopen cmd.</p> 842 843 844 </div> 845 846 <div class="article-info article-info-index"> 847 848 849 <div class="article-tag tagcloud"> 850 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 851 </div> 852 853 854 855 856 <div class="clearfix"></div> 857 </div> 858 859 </div> 860 861</article> 862 863 864 865 866 867 868 869 870 <article id="post-js设计模å¼-模æç§æåé" class="article article-type-post" itemscope itemprop="blogPost"> 871 872 <div class="article-meta"> 873 <a href="/2016/01/14/js设计模å¼-模æç§æåé/" class="article-date"> 874 <time datetime="2016-01-14T08:08:59.000Z" itemprop="datePublished">2016-01-14</time> 875</a> 876 </div> 877 878 <div class="article-inner"> 879 880 <input type="hidden" class="isFancy" /> 881 882 883 <header class="article-header"> 884 885 886 <h1 itemprop="name"> 887 <a class="article-title" href="/2016/01/14/js设计模å¼-模æç§æåé/">js设计模å¼-模æç§æåé</a> 888 </h1> 889 890 891 </header> 892 893 894 <div class="article-entry" itemprop="articleBody"> 895 896 <pre><code><span class="comment">//å设æä¸ä¸ªäººçç±»,ä¸è¬çåæ³ï¼ </span> 897<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>{ 898 <span class="keyword">this</span>.name = name; 899 <span class="keyword">this</span>.age = age; 900}; 901Person.prototype={ 902 born:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ 903 <span class="keyword">return</span> <span class="keyword">this</span>; 904 }, 905 say:<span class="function"><span class="keyword">function</span>(<span class="params">word</span>)</span>{
906 <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>; 907 <span class="built_in">console</span>.log($<span class="keyword">this</span>.name); 908 } 909} 910 911<span class="comment">//æä»¬è§å®è¿ä¸ªç±»å建ç对象ï¼å ¶name屿§å¿ é¡»å°äº4个å符</span> 912<span class="comment">//é£ä¹å¯ä»¥è¿æ ·ï¼</span> 913<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>{ 914 <span class="keyword">if</span>(name.length><span class="number">4</span>) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'name too long'</span>); 915 <span class="keyword">this</span>.name = name; 916 <span class="keyword">this</span>.age = age; 917}; 918Person.prototype={ 919 born:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ 920 <span class="keyword">return</span> <span class="keyword">this</span>; 921 }, 922 say:<span class="function"><span class="keyword">function</span>(<span class="params">word</span>)</span>{ 923 <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>; 924 <span class="built_in">console</span>.log($<span class="keyword">this</span>.name); 925 } 926} 927<span class="comment">//è¿æ ·çè¯æä»¬å¯ä»¥å¨å建对象ä¹åéå¶å¯¹è±¡ç屿§</span> 928<span class="keyword">var</span> person1 = <span class="keyword">new</span> Person(<span class="string">'Zacarh'</span>,<span class="number">23</span>);<span class="comment">//è¿æ ·ä¼æ¥é</span> 929<span class="comment">//使¯æä¸ªå¼ç«¯ï¼ç¨åºåå建äºç¬¦åè§å®ç对象ï¼ä½æ¯ä»ä»å¯ä»¥ä¿®æ¹å¯¹è±¡ç屿§æä¸ºä¸ç¬¦åè§åçå¼</span> 930<span class="keyword">var</span> person2 = <span class="keyword">new</span> Person(<span class="string">'Tom'</span>,<span class="number">22</span>);<span class="comment">//æåå建</span> 931person2.name = <span class="string">'Zacarh'</span>;<span class="comment">//æåä¿®æ¹ä¸ºä¸ç¬¦åè§åçå¼</span> 932<span class="built_in">console</span>.log(person2.name);<span class="comment">//Zacarh</span> 933 934<span class="comment">//äºæ¯å°±æäºç§æåéçç±æ¥,æä»¬éç¨éå æ¨¡æç§æåé</span> 935<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>{ 936 <span class="keyword">var</span> name,age;<span class="comment">//è¿éçåéå¤é¨è®¿é®ä¸å°ï¼å¯ä»¥çæç§æåé</span> 937 <span class="keyword">this</span>.setName=<span class="function"><span class="keyword">function</span>(<span class="params">nameArgument</span>)</span>{<span class="comment">//è¿ä¸ªæ¯ç¹ææ¹æ³ï¼å¯ä»¥è®¿é®ç§æåé</span> 938 <span class="keyword">if</span>(nameArgument.length><span class="number">4</span>) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'name too long'</span>); 939 name = nameArgument;<span class="comment">//ç¹ææ¹æ³å å´å¯ä»¥è®¿é®å°å¤é¨åéãjs彿°ä½ç¨åæ¯å¨å®ä¹çæ¶åç¡®å®çï¼ä¸æ¯å¨æ§è¡çæ¶åç¡®å®ç</span> 940 }; 941 <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ 942 <span class="built_in">console</span>.log(name);<span class="comment">//è¿éå°±ä¸ç¨this.nameäº</span> 943 } 944} 945<span class="keyword">var</span> person1 = <span class="keyword">new</span> Person(); 946<span class="comment">// person1.setName('Zacarh');//æ¥éï¼å符é¿åº¦å¤§äº4</span> 947person1.setName(<span class="string">'Tom'</span>);<span class="comment">//å¯ä»¥</span> 948person1.say();<span class="comment">//è¾åºTomï¼è䏿¤æ¶ä½ æ æ³ç´æ¥æ´æ¹nameçå¼äºï¼å¿ é¡»è¦éè¿setName彿°æå¯ä»¥ã</span> 949 950<span class="comment">//ä¸é¢é£ç§åæ³çå¼ç«¯å°±æ¯ï¼æ¯å建ä¸ä¸ªå¯¹è±¡ï¼ç¹æå½æ°ä¹ä¼åå»ºä¸æ¬¡ï¼è¿æ ·ä¼èè´¹æ´å¤çå åï¼ä¸åç¨prototype飿 ·ææå¯¹è±¡å ±ç¨prototypeä¸é¢çæ¹æ³ã</span> 951</code></pre> 952 953 </div> 954 955 <div class="article-info article-info-index"> 956 957 958 <div class="article-tag tagcloud"> 959 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 960 </div> 961 962 963 964 965 <div class="clearfix"></div> 966 </div> 967 968 </div> 969 970</article> 971 972 973 974 975 976 977 978 979 <article id="post-ç»éªå享-ç½é¡µå¨æä¹CSSç¯" class="article article-type-post" itemscope itemprop="blogPost"> 980 981 <div class="article-meta"> 982 <a href="/2015/11/23/ç»éªå享-ç½é¡µå¨æä¹CSSç¯/" class="article-date"> 983 <time datetime="2015-11-23T02:28:29.000Z" itemprop="datePublished">2015-11-23</time> 984</a> 985 </div> 986 987 <div class="article-inner"> 988 989 <input type="hidden" class="isFancy" /> 990 991 992 <header class="article-header"> 993 994 995 <h1 itemprop="name"> 996 <a class="article-title" href="/2015/11/23/ç»éªå享-ç½é¡µå¨æä¹CSSç¯/">ç»éªå享-ç½é¡µå¨æä¹CSSç¯</a> 997 </h1> 998 999 1000 </header> 1001 1002 1003 <div class="article-entry" itemprop="articleBody"> 1004 1005 <h2 id="ç½é¡µå¨æä¹CSSç¯">ç½é¡µå¨æä¹CSSç¯</h2><p>å¨ç½é¡µä¸å®ç°å¨ç»æææå¾å¤ç§æ¹å¼ï¼ä¾å¦ç±jsæ§å¶çcanvasãsvgãelementså¨ç»ï¼è¿æç±css3æ§å¶çsvgåelementså¨ç»çï¼è¿æflashï¼ï¼ãcsså®ç°elementså¨ç»ä¸»è¦éè¿transitionï¼è¿æ¸¡ææï¼åanimationï¼
1005å¨ç»ï¼æ¥æ§å¶ãå ¶ä¸animationéè¿å ¶å¼ºå¤§ç彿°èªå®ä¹åå丰å¯çæ§å¶æ¥å£ä»¥åcss3ä¸ç俱æ¥çæµç é«éæ¸²æææï¼æä¸ºäºå¨ç»å¤§åçä¸åªå²æ ã</p> 1006<p>å¨å¶ä½ä¸äºç®åçãå¨ç»å ç´ å°çã交äºå°çå¨ç»ãcss3çanimationæ¯æå¥½çéæ©ã<br>è¿ç¯æç« ç主é¢å°±æ¯ï¼ç¨å¥½animationçæå·§ãåºç¡ç¥è¯ç½ä¸ä¸å¤§æå°±ä¸è¯´äºã</p> 1007<h2 id="Tips1:æ§å¶å¨ç»å¼å§æ§è¡æ¶å»">Tips1:æ§å¶å¨ç»å¼å§æ§è¡æ¶å»</h2><p>æä»¬ä»ä¾ååºåï¼å妿们æ³è¦ä¸ä¸ªå°çï¼å¨æä¸ªæ¶å»ï¼ä¾å¦ç¹å»äºä¸ä¸ªæé®ï¼åå·¦å¨ä¸ä¸ãè¿æ¶æä»¬å°±å¯ä»¥åå© animation-play-state è¿ä¸ªå±æ§ã</p> 1008<blockquote> 1009<p>animation-play-state 屿§è§å®å¨ç»æ£å¨è¿è¡è¿æ¯æåã</p> 1010</blockquote> 1011<p>å设æä»¬éè¦å¨ç»çå ç´ ä¸º.eleï¼.eleçä¸çº§ä¸º.ele-wrapï¼é£ä¹æä»¬å¯ä»¥è¿æ ·åcssï¼</p> 1012<blockquote> 1013<p>.ele-wrap .ele{animation-play-state:paused;}</p> 1014<p>.playing .ele{animation-play-state:running;}</p> 1015<p>.ele{animation:moveToLeft 1s;}</p> 1016</blockquote> 1017<p>彿们ç»ele-wrap å ä¸playingï¼ä¾å¦éè¿ç¹å»äºä»¶æ·»å ï¼çæ¶åï¼è¿ä¸ªæ¶åeleå°±ä¼å¨èµ·æ¥ã</p> 1018<p>éè¿è¿ç§æ¹æ³ï¼æä»¬è½æ´å æ¹ä¾¿æ¸ æ°å°æ§å¶æäºåºåä¸å ç´ çå¨ç»å¼å§æ§è¡æ¶å»ã</p> 1019<h2 id="Tips2:å å å¨ç»">Tips2:å å å¨ç»</h2><p>animation æ¯æ¯æå å å¨ç»çåæ³çï¼ç代ç </p> 1020<blockquote> 1021<p> .ele{animation:fadeIn 1s,sildeLeft 1s}</p> 1022</blockquote> 1023<p>è¿ä¸ªåæ³çæææ¯è®©å ç´ æ¸æ¾åæ¶å左移å¨ã</p> 1024<p>è¿éæä¸ç¹è¦æ³¨æçæ¯ï¼å¦æåé¢çå¨ç»æ¹åçå ç´ å±æ§ååé¢çå¨ç»ä¸æ ·çè¯ï¼é£ä¹åé¢å¨ç»ç屿§æ¹å就失æäºã</p> 1025<blockquote> 1026<p> .ele{animation:fadeIn 1s,sildeLeft 1s,sildeUp 1s}</p> 1027</blockquote> 1028<p>妿æ¯ä¸é¢è¿ç§åæ³ï¼é£ä¹sildeLeftå°è¢«å¿½ç¥ã</p> 1029<p>å¦å¤ä¸ç§å®ç°æ¹æ³æ¯éç¨å ç´ åµå¥ã</p> 1030<p>éè¿ç»å¨ç»å ç´ å¤å ä¸ä¸ªç¶çº§å ç´ ï¼ç¶åç»ç¶çº§åå级åå«å ä¸å¨ç»ã</p> 1031<blockquote> 1032<p> .ele-wrap{animation:fadeIn 1s}</p> 1033<p> .ele-warp .ele{animation:slideLeft 1s}</p> 1034</blockquote> 1035<h2 id="Tips3:è¿æ¥å¨ç»">Tips3:è¿æ¥å¨ç»</h2><p>éè¿animaitonçanimation-delayå¯ä»¥å®ç°å¨ç»è¿æ¥ãæ¯å¦ä¸ä¸ªä¾åæä»¬ä¸è¦ä¸¤ä¸ªå¨ç»åæ¶è¿è¡ï¼æä»¬æ³å ç´ æ¸æ¾ååå左移å¨ï¼é£ä¹æä»¬å¯ä»¥è¿æ ·åï¼</p> 1036<blockquote> 1037<p> .ele{animation:fadeIn 1s,sildeLeft 1s 1s}</p> 1038</blockquote> 1039<p>sildeLeftåé¢ç第ä¸ä¸ª1sæ¯æå¨ç»æ§è¡æ¶é´ï¼ç¬¬äºä¸ª1sæ¯æå¨ç»å»¶è¿å¤ä¹ ææ§è¡ãè¿æ ·åå ç´ å°±ä¼å»¶è¿1sæå左边移å¨ã</p> 1040<p>ä¸Tips2䏿 ·ï¼ç¨å ç´ åµå¥æ¹å¼å¯ä»¥è¿æ¥æ°ç®æ´å¤çå¨ç»ã</p> 1041<h2 id="Tips4:è§å®å¨ç»æ§è¡ä½ç½®">Tips4:è§å®å¨ç»æ§è¡ä½ç½®</h2><p>animation-delayå 许è´å¼ï¼è´å¼å¨ç»å°é©¬ä¸å¼å§ï¼ç¶åè·³è¿å¨ç»çåNç§ãæ¯å¦æä»¬å¸æeleç´æ¥å°±å左移å¨å°±å¯ä»¥è¿æ ·åï¼</p> 1042<blockquote> 1043<p>.ele{animation:fadeIn 1s -1s,sildeLeft 1s}</p> 1044</blockquote> 1045<p>è¿æ ·åfadeIn马䏿§è¡ï¼è䏿¯ä»åæ¬æ§è¡1såçç¶æå¼å§æ§è¡ã</p> 1046<h2 id="Tips5:æ¥åææ¾å¨ç»">Tips5:æ¥åææ¾å¨ç»</h2><p>animation-direction屿§å¨æäºæ åµå¾å¥½ç¨ãæ¯å¦ä½ æ³è®©å ç´ æç §è½¨è¿¹æ¥åç§»å¨ãæç §å¸¸è§æ¹æ³ä½ è¦è¿æ ·åï¼</p> 1047<pre><code> <span class="at_rule">@<span class="keyword">keyframes</span> move</span>{ 1048 0%,100%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">0</span>)</span></span>;}</span> 1049 25%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span> 1050 50%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">120px</span>,<span class="number">120px</span>)</span></span>;}</span> 1051 75%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span> 1052 } 1053 1054<span class="class">.ele</span><span class="rules">{<span class="rule"><span class="attribute">animation</span>:<span class="value">move <span class="number">4s</span> infinite</span></span></span>} 1055</code></pre><p>妿ç¨animation-direction ï¼åªè¦è¿æ ·</p> 1056<pre><code><span class="at_rule">@<span class="keyword">keyframes</span> move</span>{ 1057 0%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">0</span>)</span></span>;}</span> 1058 50%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span> 1059 100%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">120px</span>,<span class="number">120px</span>)</span></span>;}</span> 1060 } 1061 1062<span class="class">.ele</span><span class="rules">{<span class="rule"><span class="attribute">animation</span>:<span class="value">move <span class="number">4s</span> infinite alternate</span></span></span>} 1063</code></pre><p>å½ç¶äºè¿åªæ¯ç®åçä¸ä¸ªä¾åã</p> 1064<p>æªå®å¾ ç»ãã</p> 1065 1066 1067 </div> 1068 1069 <div class="article-info article-info-index"> 1070 1071 1072 <div class="article-tag tagcloud"> 1073 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 1074 </div> 1075 1076 1077 1078 1079 <div class="clearfix"></div> 1080 </div> 1081 1082 </div> 1083 1084</article> 1085 1086 1087 1088 1089 1090 1091 1092 1093 <article id="post-argumentsä¸çcalleeä¸caller" class="article article-type-post" itemscope itemprop="blogPost"> 1094 1095 <div class="article-meta"> 1096 <a href="/2015/11/16/argumentsä¸çcalleeä¸caller/" class="article-date"> 1097 <time datetime="2015-11-16T07:21:47.000Z" itemprop="datePublished">2015-11-16</time> 1098</a> 1099 </div> 1100 1101 <div class="article-inner"> 1102 1103 <input type="hidden" class="isFancy" /> 1104 1105 1106 <header class="article-header"> 1107 1108 1109 <h1 itemprop="name"> 1110 <a class="article-title" href="/2015/11/16/argumentsä¸çcalleeä¸caller/">argumentsä¸çcallerä¸callee</a> 1111 </h1> 1112 1113 1114 </header> 1115 1116 1117 <div class="article-entry" itemprop="articleBody"> 1118 1119 <p>argumentsä¸æä¸¤ä¸ªå¥½ç¨ç屿§ï¼callerä¸calleeï¼ä¸æææä¸ºå¼å«è å被å¼å«è ãé£ä¹ï¼è¿ä¸¤ä¸ªå±æ§ï¼ç©¶ç«æ¯å¥ï¼</p> 1120<h2 id="å¼å«è caller">å¼å«è caller</h2><blockquote> 1121<p>å«ä¹ï¼è¿åå½åè°ç¨è¯¥å±æ§çæ¹æ³çæ¹æ³</p> 1122</blockquote> 1123<p>æç¹ç»å£ï¼è¯¦ç»ç¹å°±æ¯ï¼å¦æä¸ä¸ªæ¹æ³éé¢ï¼è°ç¨äºcallerï¼é£ä¹callerå°±è¿åè°ç¨è¿ä¸ªæ¹æ³çæ¹æ³ï¼å¦æè¿ä¸ªæ¹æ³æ¯ç±é¡¶çº§ï¼æµè§å¨ç«¯ä¸ºwindowï¼è°ç¨çï¼åè¿åundefinedã</p> 1124<p>æä»¬æ¥ä¸¾ä¸ªä¾å</p> 1125<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>)</span>{ 1126 <span class="built_in">console</span>.log(<span class="built_in">arguments</span>.caller); 1127} 1128 1129<span class="function"><span class="keyword">function</span> <span class="title">
1129f2</span>(<span class="params"></span>)</span>{ 1130 f1(); 1131} 1132 1133f1();<span class="comment">//undefined</span> 1134f2();<span class="comment">//function f2(){ f1();}</span> 1135</code></pre><p>caller卿¯æ¬¡å½æ°æ§è¡çæ¶åé½ä¼éæ°æ§è¡ã</p> 1136<p>è¿ä¸ªç¹æ§æå³çcallerå¯ä»¥ç¨æ¥æ¾ç¤ºå½æ°çåç¼è¯ææ¬ã</p> 1137<h2 id="被å¼å«è callee">被å¼å«è callee</h2><blockquote> 1138<p>å«ä¹ï¼è¿åå½åè°ç¨è¯¥å±æ§çæ¹æ³</p> 1139</blockquote> 1140<p>è¿ä¸ªå¥½çè§£ï¼å°±æ¯è¿åè°ç¨å½æ°æ¬èº«ã</p> 1141<p>è¿æ¯æ¥ççä¾å</p> 1142<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>)</span>{ 1143 <span class="built_in">console</span>.log(<span class="built_in">arguments</span>.callee); 1144} 1145f1(); <span class="comment">//function f1(){ ...}</span> 1146</code></pre><p>å©ç¨calleeæä»¬å¯ä»¥è½»æ¾å®ç°å¾å¤åè½ï¼ä¾å¦éå½ï¼</p> 1147<pre><code>function <span class="keyword">fact</span>(<span class="keyword">n</span>){ 1148 <span class="keyword">if</span>(<span class="keyword">n</span><=0){ 1149 <span class="keyword">return</span> 1; 1150 }<span class="keyword">else</span>{ 1151 <span class="keyword">return</span> <span class="keyword">n</span>*arguments.callee(<span class="keyword">n</span>-1); 1152 } 1153} 1154</code></pre><p>æè æ£éªå®åä¸å½¢åä¸ªæ°æ¯å¦ç¸åï¼</p> 1155<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f4</span>(<span class="params">x,y,z</span>)</span>{ 1156 <span class="keyword">if</span>(<span class="built_in">arguments</span>.length === <span class="built_in">arguments</span>.callee.length){ 1157 <span class="built_in">console</span>.log(<span class="string">'å®åå½¢å个æ°ç¸å'</span>); 1158 }<span class="keyword">else</span>{ 1159 <span class="built_in">console</span>.log(<span class="string">'å®åå½¢å个æ°ä¸å'</span>); 1160 } 1161} 1162f4(<span class="number">1</span>,<span class="number">2</span>);<span class="comment">//å®åå½¢å个æ°ä¸å</span> 1163f4(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);<span class="comment">//å®åå½¢å个æ°ç¸å</span> 1164</code></pre><p>è¿æå ¶ä»åè½ï¼æå¾ ææã</p> 1165 1166 1167 </div> 1168 1169 <div class="article-info article-info-index"> 1170 1171 1172 <div class="article-tag tagcloud"> 1173 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 1174 </div> 1175 1176 1177 1178 1179 <div class="clearfix"></div> 1180 </div> 1181 1182 </div> 1183 1184</article> 1185 1186 1187 1188 1189 1190 1191 1192 1193 <article id="post-git常ç¨å½ä»¤" class="article article-type-post" itemscope itemprop="blogPost"> 1194 1195 <div class="article-meta"> 1196 <a href="/2015/11/10/git常ç¨å½ä»¤/" class="article-date"> 1197 <time datetime="2015-11-10T00:50:44.000Z" itemprop="datePublished">2015-11-10</time> 1198</a> 1199 </div> 1200 1201 <div class="article-inner"> 1202 1203 <input type="hidden" class="isFancy" /> 1204 1205 1206 <header class="article-header"> 1207 1208 1209 <h1 itemprop="name"> 1210 <a class="article-title" href="/2015/11/10/git常ç¨å½ä»¤/">git常ç¨å½ä»¤</a> 1211 </h1> 1212 1213 1214 </header> 1215 1216 1217 <div class="article-entry" itemprop="articleBody"> 1218 1219 <hr> 1220<h1 id="常ç¨å½ä»¤ï¼">常ç¨å½ä»¤ï¼</h1><p>åå»ºçæ¬åº:</p> 1221<blockquote> 1222<pre><code><span class="title">git</span> init 1223</code></pre></blockquote> 1224<p>æ·»å æä»¶:</p> 1225<blockquote> 1226<pre><code>git <span class="built_in">add</span> <<span class="built_in">files</span>> 1227git <span class="built_in">add</span> . <span class="comment">#æ·»å æææä»¶</span> 1228</code></pre></blockquote> 1229<p>å 餿件:</p> 1230<blockquote> 1231<pre><code>git rm <span class="tag"><<span class="title">files</span>></span> 1232</code></pre></blockquote> 1233<p>æäº¤ï¼</p> 1234<blockquote> 1235<pre><code>git <span class="operator"><span class="keyword">commit</span> -<span class="keyword">m</span> <span class="string">
1235"æè¿°"</span></span> 1236</code></pre></blockquote> 1237<p>æ¾ç¤ºä»åºç¶æï¼</p> 1238<blockquote> 1239<pre><code>git <span class="keyword">status</span> 1240</code></pre></blockquote> 1241<p>æ¾ç¤ºdiffï¼</p> 1242<blockquote> 1243<pre><code><span class="title">git</span> diff 1244</code></pre></blockquote> 1245<p>丢å¼å·¥ä½åºçä¿®æ¹ï¼</p> 1246<blockquote> 1247<pre><code>git checkout <span class="comment">-- file</span> 1248</code></pre></blockquote> 1249<p>åå»ºåæ¯ï¼</p> 1250<blockquote> 1251<pre><code><span class="title">git</span> branch dev <span class="comment">#devæ¯åæ¯ååï¼è¿éåªæ¯ä¸ä¸ªä¾å,ä¸å</span> 1252</code></pre></blockquote> 1253<p>åå»ºå¹¶åæ¢å°dev忝ï¼</p> 1254<blockquote> 1255<pre><code>git checkout -<span class="tag">b</span> dev 1256</code></pre></blockquote> 1257<p>æ¥ç忝ï¼</p> 1258<blockquote> 1259<pre><code>git branch #æ¾ç¤ºç忝ä¸<span class="escape">``</span>*<span class="escape">``</span>å·ä½ç½®ä»£è¡¨å½å忝 1260</code></pre></blockquote> 1261<p>忢å°dev忝ï¼</p> 1262<blockquote> 1263<pre><code><span class="title">git</span> checkout dev 1264</code></pre></blockquote> 1265<p>åå¹¶dev忝å°å½å忝ï¼</p> 1266<blockquote> 1267<pre><code>git <span class="built_in">merge</span> dev 1268</code></pre></blockquote> 1269<p>å é¤dev忝ï¼</p> 1270<blockquote> 1271<pre><code><span class="label">git</span> <span class="keyword">branch </span>-d dev 1272</code></pre></blockquote> 1273<p>æ¾ç¤ºåå²çæ¬ï¼</p> 1274<blockquote> 1275<pre><code>git <span class="command">log</span> 1276</code></pre></blockquote> 1277<p>æ¾ç¤ºåå²ä¿¡æ¯ï¼</p> 1278<blockquote> 1279<pre><code><span class="title">git</span> show 1280</code></pre></blockquote> 1281<p>æ¾ç¤ºå岿ä½ï¼</p> 1282<blockquote> 1283<pre><code><span class="title">git</span> reflog 1284</code></pre></blockquote> 1285<p>éåï¼</p> 1286<blockquote> 1287<pre><code>git <span class="operator"><span class="keyword">reset</span> <span class="comment">--hard <HEAD></span></span> 1288</code></pre></blockquote> 1289<p>æ·»å è¿ç¨ä»åºï¼</p> 1290<blockquote> 1291<pre><code><span class="label">git</span> remote <span class="keyword">add </span>origin <<span class="keyword">address></span> 1292</code></pre></blockquote> 1293<p>æ¨éå¹¶å ³èmasterï¼</p> 1294<blockquote> 1295<pre><code><span class="label">git</span> <span class="keyword">push </span>-u origin master 1296</code></pre></blockquote> 1297<p>å ³èåç®å为ï¼</p> 1298<blockquote> 1299<pre><code><span class="label">git</span> <span class="keyword">push </span>origin master 1300</code></pre></blockquote> 1301<p>å éï¼</p> 1302<blockquote> 1303<pre><code>git <span class="keyword">clone</span> <span class="title"><address</span>> 1304</code></pre></blockquote> 1305<hr> 1306<h1 id="æ´å 详ç»çå½ä»¤å¤§å ¨">æ´å 详ç»çå½ä»¤å¤§å ¨</h1><h2 id="é ç½®">é ç½® </h2><blockquote> 1307<pre><code>é 置使ç¨gitä»åºäººåçå§ååemail 1308$ git config --<span class="keyword">global</span> user.name <span class="string">"Your Name"</span> 1309$ git config --<span class="keyword">global</span> user.email [email protected] 1310 1311git config --<span class="keyword">global</span> credential.helper cache <span class="preprocessor">#é ç½®å°ç¼å é»è®¤15åé </span> 1312git config --<span class="keyword">global</span> credential.helper <span class="comment">'cache --timeout=3600' #ä¿®æ¹ç¼åæ¶é´ </span> 1313 1314git config --<span class="keyword">global</span> color.ui <span class="literal">true</span> 1315git config --<span class="keyword">global</span> <span class="keyword">alias</span>.co checkout 1316git config --<span class="keyword">global</span> <span class="keyword">alias</span>.ci commit 1317git config --<span class="keyword">global</span> <span class="keyword">alias</span>.st status 1318git config --<span class="keyword">global</span> <span class="keyword">alias</span>.br branch 1319git config --<span class="keyword">global</span> core.editor <span class="string">"mate -w"</span> <span class="preprocessor"># 设置Editor使ç¨textmate </span> 1320git config -<span class="number">1</span> <span class="preprocessor">#å举ææé ç½®ç¨æ·çgité ç½®æä»¶~/.gitconfig </span> 1321</code></pre></blockquote> 1322<h2 id="æ¥çãæ·»å ãæäº¤ãå é¤ãæ¾åï¼éç½®ä¿®æ¹æä»¶">æ¥çãæ·»å ãæäº¤ãå é¤ãæ¾åï¼éç½®ä¿®æ¹æä»¶</h2><blockquote> 1323<pre><code>git help <<span class="command"><span class="keyword">command</span>> # æ¾ç¤º<span class="title">command</span>ç<span class="title">help</span> </span>
1324git show <span class="comment"># æ¾ç¤ºææ¬¡æäº¤çå 容 </span> 1325git show $id 1326 1327git co <span class="comment">-- <file> # æå¼å·¥ä½åºä¿®æ¹ </span> 1328git co . <span class="comment"># æå¼å·¥ä½åºä¿®æ¹ </span> 1329 1330git <span class="built_in">add</span> <<span class="built_in">file</span>> <span class="comment"># å°å·¥ä½æä»¶ä¿®æ¹æäº¤å°æ¬å°æååº </span> 1331git <span class="built_in">add</span> . <span class="comment"># å°ææä¿®æ¹è¿ç工使件æäº¤æååº </span> 1332 1333git rm <<span class="built_in">file</span>> <span class="comment"># ä»çæ¬åºä¸å 餿件 </span> 1334git rm <<span class="built_in">file</span>> <span class="comment">--cached # ä»çæ¬åºä¸å 餿件ï¼ä½ä¸å 餿件 </span> 1335 1336git reset <<span class="built_in">file</span>> <span class="comment"># 仿ååºæ¢å¤å°å·¥ä½æä»¶ </span> 1337git reset <span class="comment">-- . # 仿ååºæ¢å¤å°å·¥ä½æä»¶ </span> 1338git reset <span class="comment">--hard # æ¢å¤æè¿ä¸æ¬¡æäº¤è¿çç¶æï¼å³æ¾å¼ä¸æ¬¡æäº¤åçæææ¬æ¬¡ä¿®æ¹ </span> 1339 1340git ci <<span class="built_in">file</span>> 1341git ci . 1342git ci -<span class="operator">a</span> <span class="comment"># å°git add, git rmågit ciçæä½é½åå¹¶å¨ä¸èµ·å </span> 1343git ci -am <span class="string">"some comments"</span> 1344git ci <span class="comment">--amend # ä¿®æ¹æå䏿¬¡æäº¤è®°å½ </span> 1345 1346git revert <$id> <span class="comment"># æ¢å¤ææ¬¡æäº¤çç¶æï¼æ¢å¤å¨ä½æ¬èº«ä¹å建äºä¸æ¬¡æäº¤å¯¹è±¡ </span> 1347git revert HEAD <span class="comment"># æ¢å¤æå䏿¬¡æäº¤çç¶æ </span> 1348</code></pre></blockquote> 1349<h2 id="æ¥çæä»¶diff">æ¥çæä»¶diff</h2><blockquote> 1350<pre><code>git diff <span class="variable"><file></span> <span class="comment"># æ¯è¾å½åæä»¶åæååºæä»¶å·®å¼ </span> 1351git diff 1352git diff <span class="variable"><$id1></span> <span class="variable"><$id2></span> <span class="comment"># æ¯è¾ä¸¤æ¬¡æäº¤ä¹é´çå·®å¼ </span> 1353git diff <span class="variable"><branch1></span>..<span class="variable"><branch2></span> <span class="comment"># å¨ä¸¤ä¸ªåæ¯ä¹é´æ¯è¾ </span> 1354git diff --staged <span class="comment"># æ¯è¾æååºåçæ¬åºå·®å¼ </span> 1355git diff --cached <span class="comment"># æ¯è¾æååºåçæ¬åºå·®å¼ </span> 1356git diff --stat <span class="comment"># ä» ä» æ¯è¾ç»è®¡ä¿¡æ¯ </span> 1357</code></pre></blockquote> 1358<h2 id="æ¥çæäº¤è®°å½">æ¥çæäº¤è®°å½</h2><blockquote> 1359<pre><code>git <span class="command">log</span> 1360git <span class="command">log</span> <<span class="type">file</span>> <span class="comment"># æ¥ç该æä»¶æ¯æ¬¡æäº¤è®°å½ </span> 1361git <span class="command">log</span> -p <<span class="type">file</span>> <span class="comment"># æ¥çæ¯æ¬¡è¯¦ç»ä¿®æ¹å 容çdiff </span> 1362git <span class="command">log</span> -p -<span class="number">2</span> <span class="comment"># æ¥çæè¿ä¸¤æ¬¡è¯¦ç»ä¿®æ¹å 容çdiff </span> 1363git <span class="command">log</span> <span class="comment">--stat #æ¥çæäº¤ç»è®¡ä¿¡æ¯ </span> 1364</code></pre></blockquote> 1365<p>tig:Macä¸å¯ä»¥ä½¿ç¨tig代æ¿diffålogï¼brew install tig</p> 1366<h2 id="åå¾Gitä»åº">åå¾Gitä»åº</h2><blockquote> 1367<pre><code>git init <span class="comment">#åå§åä¸ä¸ªçæ¬ä»åº </span> 1368 1369git <span class="keyword">clone</span> <span class="title"><address</span>> <span class="comment">#Cloneè¿ç¨çæ¬åº </span> 1370 1371git remote add origin <span class="tag"><address></span> <span class="comment">#æ·»å è¿ç¨çæ¬åºorigin</span> 1372 1373git remote -v <span class="comment">#æ¥çè¿ç¨ä»åº</span> 1374</code></pre></blockquote> 1375<h2 id="æäº¤ä½ çä¿®æ¹">æäº¤ä½ çä¿®æ¹</h2><blockquote> 1376<pre><code>git commit âm <span class="string">"ä½ çæ³¨é"</span> <span class="comment">#æäº¤ä½ çä¿®æ¹ </span> 1377 1378git push origin master <span class="comment">#æ¨éä½ çæ´æ°å°è¿ç¨æå¡å¨,è¯æ³ä¸º git push [è¿ç¨å] [æ¬å°åæ¯]:[è¿ç¨åæ¯] </span> 1379 1380git status <span class="comment">#æ¥çæä»¶ç¶æ </span> 1381 1382git <span class="built_in">add</span> readme.txt <span class="comment">#è·è¸ªæ°æä»¶</span> 1383 1384git rm readme.txt <span class="comment">#ä»å½åè·è¸ªåè¡¨ç§»é¤æä»¶ï¼å¹¶å®å ¨å é¤</span> 1385 1386git rm âcached readme.txt <span class="comment">#ä» å¨æååºå é¤ï¼ä¿çæä»¶å¨å½åç®å½ï¼ä¸åè·è¸ª </span> 1387 1388git mv reademe.txt readme <span class="comment">#éå½åæä»¶ </span> 1389 1390git <span class="built_in">log</span> <span class="comment">#æ¥çæäº¤çåå²è®°å½ </span> 1391 1392git commit <span class="comment">--amend #ä¿®æ¹æå䏿¬¡æäº¤æ³¨éçï¼å©ç¨âamendåæ° </span> 1393 1394-å¿è®°æäº¤æäºä¿®æ¹ï¼ä¸é¢ç䏿¡å½ä»¤åªä¼å¾å°ä¸ä¸ªæäº¤ã
1395git commit âm &quot;<span class="built_in">add</span> readme.txt&quot; 1396git <span class="built_in">add</span> readme_forgotten 1397git commit âamend 1398 1399 1400git reset HEAD b <span class="comment">#åè®¾ä½ å·²ç»ä½¿ç¨git add .ï¼å°ä¿®æ¹è¿çæä»¶aãbå å°æååºãç°å¨ä½ åªæ³æäº¤aæä»¶ï¼ä¸æ³æäº¤bæä»¶ï¼åºè¯¥è¿æ ·</span> 1401 1402git checkout â- readme.txt <span class="comment">#忶坹æä»¶çä¿®æ¹</span> 1403</code></pre></blockquote> 1404<h2 id="æ¥çã忢ãå建åå é¤åæ¯">æ¥çã忢ãå建åå é¤åæ¯</h2><blockquote> 1405<pre><code>git br -r <span class="comment"># æ¥çè¿ç¨åæ¯ </span> 1406git br <span class="variable"><new_branch></span> <span class="comment"># å建æ°ç忝 </span> 1407git br -v <span class="comment"># æ¥çåä¸ªåæ¯æåæäº¤ä¿¡æ¯ </span> 1408git br --merged <span class="comment"># æ¥çå·²ç»è¢«åå¹¶å°å½å忝ç忝 </span> 1409git br --no-merged <span class="comment"># æ¥çå°æªè¢«åå¹¶å°å½å忝ç忝 </span> 1410 1411git co <span class="variable"><branch></span> <span class="comment"># åæ¢å°æä¸ªåæ¯ </span> 1412git co -b <span class="variable"><new_branch></span> <span class="comment"># å建æ°ç忝ï¼å¹¶ä¸åæ¢è¿å» </span> 1413git co -b <span class="variable"><new_branch></span> <span class="variable"><branch></span> <span class="comment"># åºäºbranchå建æ°çnew_branch </span> 1414 1415git co <span class="variable">$id</span> <span class="comment"># æææ¬¡åå²æäº¤è®°å½checkoutåºæ¥ï¼ä½æ åæ¯ä¿¡æ¯ï¼åæ¢å°å ¶ä»åæ¯ä¼èªå¨å é¤ </span> 1416git co <span class="variable">$id</span> -b <span class="variable"><new_branch></span> <span class="comment"># æææ¬¡åå²æäº¤è®°å½checkoutåºæ¥ï¼å建æä¸ä¸ªåæ¯ </span> 1417 1418git br -d <span class="variable"><branch></span> <span class="comment"># å é¤æä¸ªåæ¯ </span> 1419git br -D <span class="variable"><branch></span> <span class="comment"># 强å¶å é¤æä¸ªåæ¯ (æªè¢«åå¹¶çåæ¯è¢«å é¤çæ¶åéè¦å¼ºå¶) </span> 1420</code></pre></blockquote> 1421<h2 id="忝åå¹¶årebase">忝åå¹¶årebase</h2><blockquote> 1422<pre><code>git merge <span class="tag"><branch></span> <span class="comment"># å°branch忝åå¹¶å°å½å忝 </span> 1423git merge origin/<span class="keyword">master</span> <span class="title">--no-ff</span> <span class="comment"># ä¸è¦Fast-Fowardåå¹¶ï¼è¿æ ·å¯ä»¥çæmergeæäº¤ </span> 1424git rebase <span class="keyword">master</span> <span class="title"><branch</span>> <span class="comment"># å°master rebaseå°branchï¼ç¸å½äºï¼ </span> 1425git co <span class="tag"><branch></span> && git rebase <span class="keyword">master</span> <span class="title">&& git</span> co <span class="keyword">master</span> <span class="title">&& git</span> merge <span class="tag"><branch></span> 1426</code></pre></blockquote> 1427<h2 id="Gitè¡¥ä¸ç®¡ç(æ¹ä¾¿å¨å¤å°æºå¨ä¸å¼å忥æ¶ç¨)">Gitè¡¥ä¸ç®¡ç(æ¹ä¾¿å¨å¤å°æºå¨ä¸å¼å忥æ¶ç¨)</h2><blockquote> 1428<pre><code>git diff > ../sync.<span class="keyword">patch</span> <span class="preprocessor"># çæè¡¥ä¸ </span> 1429git apply ../sync.<span class="keyword">patch</span> <span class="preprocessor"># æè¡¥ä¸ </span> 1430git apply --check ../sync.<span class="keyword">patch</span> <span class="preprocessor">#æµè¯è¡¥ä¸è½å¦æå </span> 1431</code></pre></blockquote> 1432<h2 id="Gitæå管ç">Gitæå管ç</h2><blockquote> 1433<pre><code>git stash <span class="preprocessor"># æå </span> 1434git stash <span class="built_in">list</span> <span class="preprocessor"># åææstash </span> 1435git stash apply <span class="preprocessor"># æ¢å¤æåçå 容 </span> 1436git stash <span class="built_in">drop</span> <span class="preprocessor"># å 餿ååº </span> 1437</code></pre></blockquote> 1438<h2 id="Gitè¿ç¨åæ¯ç®¡ç">Gitè¿ç¨åæ¯ç®¡ç</h2><blockquote> 1439<pre><code>
1439git pull <span class="comment"># æåè¿ç¨ä»åºææåæ¯æ´æ°å¹¶åå¹¶å°æ¬å° </span> 1440git pull --<span class="keyword">no</span>-ff <span class="comment"># æåè¿ç¨ä»åºææåæ¯æ´æ°å¹¶åå¹¶å°æ¬å°ï¼ä¸è¦å¿«è¿åå¹¶ </span> 1441git fetch origin <span class="comment"># æåè¿ç¨ä»åºæ´æ° </span> 1442git merge origin/master <span class="comment"># å°è¿ç¨ä¸»åæ¯åå¹¶å°æ¬å°å½å忝 </span> 1443git co --track origin/branch <span class="comment"># è·è¸ªæä¸ªè¿ç¨åæ¯å建ç¸åºçæ¬å°åæ¯ </span> 1444git co -b <local_branch> origin/<remote_branch> <span class="comment"># åºäºè¿ç¨åæ¯å建æ¬å°åæ¯ï¼åè½åä¸ </span> 1445 1446git <span class="keyword">push</span> <span class="comment"># pushææåæ¯ </span> 1447git <span class="keyword">push</span> origin master <span class="comment"># å°æ¬å°ä¸»åæ¯æ¨å°è¿ç¨ä¸»åæ¯ </span> 1448git <span class="keyword">push</span> -u origin master <span class="comment"># å°æ¬å°ä¸»åæ¯æ¨å°è¿ç¨(妿 è¿ç¨ä¸»åæ¯åå建ï¼ç¨äºåå§åè¿ç¨ä»åº) </span> 1449git <span class="keyword">push</span> origin <local_branch> <span class="comment"># å建è¿ç¨åæ¯ï¼ originæ¯è¿ç¨ä»åºå </span> 1450git <span class="keyword">push</span> origin <local_branch>:<remote_branch> <span class="comment"># å建è¿ç¨åæ¯ </span> 1451git <span class="keyword">push</span> origin :<remote_branch> <span class="comment">#å å 餿¬å°åæ¯(git br -d <branch>)ï¼ç¶ååpushå é¤è¿ç¨åæ¯ </span> 1452</code></pre></blockquote> 1453<h2 id="åºæ¬çåæ¯ç®¡ç">åºæ¬çåæ¯ç®¡ç</h2><blockquote> 1454<pre><code>git branch <span class="built_in">dev</span> #å建ä¸ä¸ªåæ¯ 1455 1456git chekcout <span class="built_in">dev</span> #忢工ä½ç®å½å°<span class="built_in">dev</span> 1457 1458git chekcout âb <span class="built_in">dev</span> #å°ä¸é¢çå½ä»¤åå¨ä¸èµ·ï¼å建<span class="built_in">dev</span>忝并忢å°<span class="built_in">dev</span> 1459 1460git merge <span class="built_in">dev</span> #åå¹¶<span class="built_in">dev</span>忝ï¼å½åå·¥ä½ç®å½ä¸ºmaster 1461 1462git branch âd <span class="built_in">dev</span> #å并宿åï¼æ²¡æåºç°å²çªï¼å é¤<span class="built_in">dev</span>忝 1463 1464git fetch #æå»è¿ç¨ä»åºçæ°æ®ï¼è¯æ³ä¸ºgit fetch [remote-name] 1465 1466git pull #fetch 伿廿æ°çè¿ç¨ä»åºæ°æ®ï¼ä½ä¸ä¼èªå¨å°å½åç®å½ä¸ï¼è¦èªå¨åå¹¶ 1467 1468git remote <span class="built_in">show</span> origin #æ¥çè¿ç¨ä»åºçä¿¡æ¯ 1469 1470git checkout âb <span class="built_in">dev</span> origin/develop #å»ºç«æ¬å°ç<span class="built_in">dev</span>åæ¯è¿½è¸ªè¿ç¨ä»åºçdevelop忝 1471</code></pre></blockquote> 1472<h2 id="Gitè¿ç¨ä»åºç®¡ç">Gitè¿ç¨ä»åºç®¡ç</h2><blockquote> 1473<pre><code>git remote -v <span class="preprocessor"># æ¥çè¿ç¨æå¡å¨å°ååä»åºåç§° </span> 1474git remote show origin <span class="preprocessor"># æ¥çè¿ç¨æå¡å¨ä»åºç¶æ </span> 1475git remote <span class="keyword">add</span> origin git@ github:robbin/robbin_site.git <span class="preprocessor"># æ·»å è¿ç¨ä»åºå°å </span> 1476git remote <span class="keyword">set</span>-url origin git@ github.com:robbin/robbin_site.git <span class="preprocessor"># 设置è¿ç¨ä»åºå°å(ç¨äºä¿®æ¹è¿ç¨ä»åºå°å) </span> 1477git remote rm <repository> <span class="preprocessor"># å é¤è¿ç¨ä»åº </span> 1478</code></pre></blockquote> 1479<h2 id="å建è¿ç¨ä»åº">å建è¿ç¨ä»åº</h2><blockquote> 1480<pre><code>git <span class="keyword">clone</span> <span class="title">--bare</span> robbin_site robbin_site.git <span class="comment"># ç¨å¸¦çæ¬ç项ç®åå»ºçº¯çæ¬ä»åº </span> 1481scp -r my_project.git git@ git.csdn.net:~ <span class="comment"># å°çº¯ä»åºä¸ä¼ å°æå¡å¨ä¸ </span> 1482 1483mkdir robbin_site.git && cd robbin_site.git && git --bare init <span class="comment"># 卿å¡å¨å建纯ä»åº </span> 1484git remote add origin git@ github.com:robbin/robbin_site.git <sp
1484an class="comment"># 设置è¿ç¨ä»åºå°å </span> 1485git push -u origin <span class="keyword">master</span> <span class="title"># 客æ·ç«¯é¦æ¬¡æäº¤ 1486git</span> push -u origin develop <span class="comment"># 馿¬¡å°æ¬å°develop忝æäº¤å°è¿ç¨develop忝ï¼å¹¶ä¸track </span> 1487 1488git remote set-head origin <span class="keyword">master</span> <span class="title"># 设置è¿ç¨ä»åºçHEAD</span>æå<span class="literal">master</span>忝 1489 1490ä¹å¯ä»¥å½ä»¤è®¾ç½®è·è¸ªè¿ç¨åºåæ¬å°åº 1491git branch --set-upstream <span class="keyword">master</span> <span class="title">origin</span>/<span class="keyword">master</span> 1492<span class="title">git</span> branch --set-upstream develop origin/develop 1493</code></pre></blockquote> 1494 1495 1496 </div> 1497 1498 <div class="article-info article-info-index"> 1499 1500 1501 <div class="article-tag tagcloud"> 1502 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å端/">å端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ææ¯/">ææ¯</a></li></ul> 1503 </div> 1504 1505 1506 1507 1508 <div class="clearfix"></div> 1509 </div> 1510 1511 </div> 1512 1513</article> 1514 1515 1516 1517 1518 1519 1520 1521 1522 <article id="post-å¥ç®é±¼å ¨æ¥è§¦" class="article article-type-post" itemscope itemprop="blogPost"> 1523 1524 <div class="article-meta"> 1525 <a href="/2015/11/06/å¥ç®é±¼å ¨æ¥è§¦/" class="article-date"> 1526 <time datetime="2015-11-06T06:16:13.000Z" itemprop="datePublished">2015-11-06</time> 1527</a> 1528 </div> 1529 1530 <div class="article-inner"> 1531 1532 <input type="hidden" class="isFancy" /> 1533 1534 1535 <header class="article-header"> 1536 1537 1538 <h1 itemprop="name"> 1539 <a class="article-title" href="/2015/11/06/å¥ç®é±¼å ¨æ¥è§¦/">å¥ç®é±¼å ¨æ¥è§¦</a> 1540 </h1> 1541 1542 1543 </header> 1544 1545 1546 <div class="article-entry" itemprop="articleBody"> 1547 1548 <h2 id="å¥ç®é±¼">å¥ç®é±¼ </h2><p>å¥ç®é±¼å¦åå«ç»¿é³é©¬é¢é²ï¼åå«é©¬é¢é±¼ï¼æ½®æ±ä¿åï¼è¿ªä»ãæè§å¾å«è¿ªå çä»orå¾·å·çä»å¸ å¾å¤ã</p> 1549<p><img src="/images/1.jpg" alt=""></p> 1550<p>å¥ç®é±¼ å è¾£æ¤ å è±é ± ç æ¯ ä» å¦ ç 好 å ï¼ï¼</p> 1551<p>è±é ±çå¥ç®é±¼çåæ³ï¼<br>飿<br>主æ<br>å¥ç®é±¼5æ¡<br>è¾ æ<br>è±é ±1汤åãééè¾£æ¤ãééè头ãééå§ãééå°è±ãééæ²¹ãé鿏 æ°´<br>æ¥éª¤<br>1.çé å æ²¹çè头<br>2.æ¾å¥ç®é±¼ç <br>3.ç è³ä¸¤é¢å¾®é»æ¾å§ä¸ãè±æ®µãè¾£æ¤ä¸å»çé¦<br>4.å å ¥1汤åçè±é ±<br>5.åå å°éæ¸ æ°´çè³æ±å°å°±å¯ä»¥å²é äº<br>6.æå<br>å°è´´å£«<br>è±é ±æå¸å³ä¸ç¨å çäºï¼é±¼å¾é²ä¸ç¨å è¿å¤çè°æã</p> 1552 1553 1554 </div> 1555 1556 <div class="article-info article-info-index"> 1557 1558 1559 <div class="article-tag tagcloud"> 1560 <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/å½éå±å¦/">å½éå±å¦</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/çæ´»/">çæ´»</a></li></ul> 1561 </div> 1562 1563 1564 1565 1566 <div class="clearfix"></div> 1567 </div> 1568 1569 </div> 1570 1571</article> 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 <nav id="page-nav"> 1582 <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next »</a> 1583 </nav> 1584 1585</div> 1586 <footer id="footer"> 1587 <div class="outer"> 1588 <div id="footer-info"> 1589 <div class="footer-left"> 1590 © 2017 é»ä¿¡æ¿ 1591 </div> 1592 <div class="footer-right"> 1593 <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten changed by Hx2 1594 </div> 1595 </div> 1596 </div> 1597</footer> 1598 </div> 1599 1600 <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css"> 1601 1602
1603<script> 1604 var yiliaConfig = { 1605 fancybox: true, 1606 mathjax: true, 1607 animate: true, 1608 isHome: true, 1609 isPost: false, 1610 isArchive: false, 1611 isTag: false, 1612 isCategory: false, 1613 open_in_new: true 1614 } 1615</script>
vendor: 1 bytes, line 1615
1615
1616<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 1616
1616
1617<script src="/js/main.js" type="text/javascript"></script>
1617 1618 1619 1620 1621 1622 1623
1624<script type="text/x-mathjax-config"> 1625MathJax.Hub.Config({ 1626 tex2jax: { 1627 inlineMath: [ ['$','$'], ["\\(","\\)"] ], 1628 processEscapes: true, 1629 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] 1630 } 1631}); 1632 1633MathJax.Hub.Queue(function() { 1634 var all = MathJax.Hub.getAllJax(), i; 1635 for(i=0; i < all.length; i += 1) { 1636 all[i].SourceElement().parentNode.className += ' has-jax'; 1637 } 1638}); 1639</script>
1639 1640
1641<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 1642</script>
1642 1643 1644 1645 </div> 1646</body> 1647</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.