Gulp自动处理Angular发布流程介绍

Gulp流程介绍

<hr>



<h1 id="使用gulp自动化处理发布流程"><strong>使用Gulp自动化处理发布流程</strong></h1>

<blockquote>
  <p>当Angular应用发布时，开发者需要考虑以下问题：</p>
  
  <ul>
  <li>Concat :  合并多个js文件到一个js文件以减少Client端对Server端的请求次数，并提高下载速度</li>
  <li>Minify：去除js文件中的注释和空行，以减少js文件大小</li>
  <li>Uglify：混淆js文件中的变量名，方法名等，以提高js文件在客户端的安全性</li>
  </ul>
  
  <p>以上问题可以通过Gulp工具实现自动处理，以提高开发效率，加快发布流程</p>
</blockquote>

<hr>



<h2 id="gulp介绍">Gulp介绍</h2>

<p>Gulp.js是一款基于Nodejs开发的自动化工具库，通过编写Gulp脚本可以轻松实现自动化工作流程，Gulp十分适用于Angular应用开发，主要原因包括Gulp脚本使用javaScript撰写，许多第三方Gulp plugins提供应用于前端开发的任务。</p>



<h2 id="gulp使用流程">Gulp使用流程</h2>

<ol>
<li><p>首先安装<a href="http://nodejs.org">Nodejs和其工具管理器npm</a></p></li>
<li><p>在命令行下全局安装Gulp运行环境</p>

<p><code>$ npm install -g gulp</code></p></li>
<li><p>在开发根目录下安装Gulp依赖</p>

<p><code>$ npm install gulp --save-dev</code></p></li>
<li><p>在开发根目录下创建 <code>gulpfile.js</code> 文件</p></li>
<li><p>编辑gulpfile文件， 创建任务脚本</p></li>
<li><p>在开发根目录下命令行运行</p>

<p><code>$ gulp</code></p></li>
<li><p>Gulp将开始执行gulpfile文件中的任务脚本</p></li>
</ol>



<h2 id="gulp-plugins">Gulp Plugins</h2>

<p>Gulp社区十分活跃， 许多开源插件可以满足开发中遇到的各种任务自动化问题， 常用插件包括：</p>

<p><code>gulp-concat.js</code> 自动合并多个文件到一个文件，支持js, ts, css, html的多种格式。 <br>
<code>gulp-typescript.js</code> 自动编译ts文件 <br>
<code>gulp-ngmin.js</code> 自动minify Angular应用 <br>
<code>gulp-uglify.js</code> 自动最小化和混淆js文件 <br>
<code>gulp-rename.js</code> 自动更换文件名</p>



<h2 id="gulp使用举例">Gulp使用举例</h2>

<p>下面通过一个Demo，描述Gulp使用流程， 这个Demo实现了自动将现在NG 7.0 Client端 所有controller 和 directive 合并为一个js文件并最小化</p>



<pre class="prettyprint"><code class=" hljs brainfuck"><span class="hljs-comment">app</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">dist</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">js</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">controller</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">directive</span>

<p><code>controller</code> 和 <code>directive</code>是包含各自模块中的controller和directive文件，我们想每次发布时都将这两个文件夹下所有js文件合并为一个<code>netbrain.js</code>文件，和最小化的<code>netbrain.min.js</code> 并保存在dist文件夹下
<code class=" hljs brainfuck"><span class="hljs-comment">app</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">dist</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">netbrain</span><span class="hljs-string">.</span><span class="hljs-comment">js</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">netbrain</span><span class="hljs-string">.</span><span class="hljs-comment">min</span><span class="hljs-string">.</span><span class="hljs-comment">js</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">js</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">controller</span>
<span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">|</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-literal">-</span> <span class="hljs-comment">directive</span>

<p>使用Gulp可以自动完成这个流程, 具体脚本如下：</p>
<code class=" hljs javascript"><span class="hljs-comment">/*
 * 加载Gulp和相应插件
 */</span>
<span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);
<span class="hljs-keyword">var</span> concat = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-concat'</span>);
<span class="hljs-keyword">var</span> uglify = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-uglify'</span>);
<span class="hljs-keyword">var</span> rename = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-rename'</span>);
<span class="hljs-keyword">var</span> ngmin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-ngmin'</span>);

<span class="hljs-comment">/*
 * 合并js/controls 和 js/directive文件夹里所有jts文件到netbrain.js
 */</span>
gulp.task(<span class="hljs-string">'concat'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    <span class="hljs-keyword">return</span> gulp.src([
            <span class="hljs-string">'./js/controls/**/*.js'</span>,
            <span class="hljs-string">'./js.directive/**/*.js'</span>
        ])
        .pipe(concat(<span class="hljs-string">'netbrain.js'</span>))
        .pipe(gulp.dest(<span class="hljs-string">'dist/'</span>));
});



<span class="hljs-comment">/*
 * 最小化和混淆netbrain.js文件并保存到netbrain.min.js文件中
 */</span>
gulp.task(<span class="hljs-string">"uglify"</span>, [<span class="hljs-string">'concat'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    <span class="hljs-keyword">return</span> gulp.src(<span class="hljs-string">'./dist/netbrain.js'</span>)
	    .pipe(ngmin())
        .pipe(uglify({ mangle:false }))
        .pipe(rename(<span class="hljs-string">'netbrain.min.js'</span>))
        .pipe(gulp.dest(<span class="hljs-string">'./dist/'</span>))
});

<span class="hljs-comment">/*
 * default的任务
 */</span>
gulp.task(<span class="hljs-string">'default'</span>, [<span class="hljs-string">'uglify'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>

});</code></pre>

<p>编辑好gulfile.js之后，只需要在app根目录下运行<code>$ gulp</code> 即可执行任务</p>