免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

Grunt是目前最流行的前端構(gòu)建工具，對(duì)前端的效率幫助非常大，但Grunt并非完美無(wú)缺，json描述任務(wù)的方式，顯得過(guò)于繁瑣和不夠簡(jiǎn)單，對(duì)于新手來(lái)說(shuō)，有不少的學(xué)習(xí)成本。

今天明河介紹個(gè)比Grunt更易用的前端構(gòu)建工具： Gulp.js ，最近很火的開(kāi)源項(xiàng)目，引起了很多前端同學(xué)的關(guān)注，大家都很好奇，Gulp.js拿什么跟Grunt掰手腕。

大多數(shù)前端處于觀望狀態(tài)，Gulp.js這杯可樂(lè)很誘人，但第三方插件太少（常用的任務(wù)插件都有），被Grunt甩了N條街，當(dāng)然畢竟是新工具，情有可原，相信假以時(shí)日，Gulp.js會(huì)被更多前端同學(xué)認(rèn)可，明河希望通過(guò)這篇文章，能夠讓大家看到Gulp.js的潛力。

安裝Gulp.js

Gulp.js跟Grunt一樣基于Node.js，使用npm安裝即可：

npm install -g gulp

想要使用Gulp.js構(gòu)建您的工程，需要在工程目錄中安裝Gulp.js的依賴(lài)

npm install --save-dev gulp gulp-util

–save-dev 命令配置，可以自動(dòng)在工程目錄的package.json文件內(nèi)生成包依賴(lài)信息，比如：

{  "devDependencies": {    "gulp-util": "~2.2.14",    "gulp": "~3.5.2"  }}

（如果項(xiàng)目工程中沒(méi)有package.json，請(qǐng)運(yùn)行npm init。）

在工程根目錄下創(chuàng)建個(gè) gulpfile.js 文件，內(nèi)容如下：

var gulp = require('gulp');var gutil = require('gulp-util');gulp.task('default', function(){  // place code for your default task here});

使用 gulp 命令，運(yùn)行Gulp.js構(gòu)建程序：

gulp

表示運(yùn)行 default （默認(rèn)任務(wù)）成功。

接下來(lái)看個(gè)具體的demo。

簡(jiǎn)單使用說(shuō)明

假設(shè) demo工程 目錄結(jié)構(gòu)如下：

我們構(gòu)建的目標(biāo)是壓縮src目錄下的a.js和b.js，合并生成all.min.js放在build目錄下。

安裝插件

npm install --save-dev gulp-uglify gulp-concat

gulp-uglify：用于壓縮js
gulp-concat：用于合并文件

Gulp.js目前提供了 300多個(gè)插件 ，基本可以滿(mǎn)足主流前端構(gòu)建需求。

編寫(xiě)Gulpfile.js構(gòu)建腳本

完整代碼：

var gulp    = require('gulp');var gutil    = require('gulp-util');var uglify  = require('gulp-uglify');var concat  = require('gulp-concat');gulp.task('concat', function () {    gulp.src('./src/*.js')        .pipe(uglify())        .pipe(concat('all.min.js'))        .pipe(gulp.dest('./build'));});gulp.task('default', ['concat']);

運(yùn)行 gulp 命令后：

生成了 all.min.js 。

接下來(lái)來(lái)看下上述代碼的含義。

首先require需要的插件：

var uglify  = require('gulp-uglify');var concat  = require('gulp-concat');

使用 gulp.task() 定義一個(gè)任務(wù)目標(biāo)：

gulp.task('concat', function () {      //...});

第一個(gè)參數(shù)為任務(wù)名。

gulp.task()返回值為一個(gè)stream，stream的使用是Gulp.js的核心，也是Gulp.js與Grunt的最重要區(qū)別，Gulp.js充分利用了Node.js的 Streams API ，關(guān)于流的概念下一篇進(jìn)階篇會(huì)講解到。

當(dāng)?shù)诙€(gè)參數(shù)為數(shù)組時(shí)，表明此任務(wù)存在依賴(lài)任務(wù)，會(huì)運(yùn)行完依賴(lài)任務(wù)后，才執(zhí)行該任務(wù)，比如：

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {    // Do stuff});

gulp.src() 任務(wù)處理的目標(biāo)文件，返回的是stream，請(qǐng)把gulp看成礦泉水廠(chǎng)（想起了恒大冰泉-_-!），文件數(shù)據(jù)理解為水流，這里相當(dāng)于閥門(mén)打開(kāi)，水開(kāi)始順著管道（每個(gè)任務(wù)可以理解為一段管道）流去，然后經(jīng)過(guò)各個(gè)插件的加工過(guò)濾，最后罐裝到水瓶里面。

.pipe() 是stream的核心方法，不是gulp的方法哦，第一個(gè)參數(shù)為插件方法，插件會(huì)接收從上游流下的文件，進(jìn)行處理加工后，再往下流。

.pipe(uglify())

壓縮文件

 .pipe(concat('all.min.js'))

將壓縮后的文件合并成all.min.js，這里留意，不需要目錄路徑，stream流過(guò)來(lái)的就是文件數(shù)據(jù)，只要提供文件名即可。

  .pipe(gulp.dest('./build'))

gulp.dest() ：用于指定文件輸出位置，第一個(gè)參數(shù)為目錄路徑。

最后運(yùn)行任務(wù)：

gulp.task('default', ['concat']);

gulp命令默認(rèn)執(zhí)行default任務(wù)，等于 gulp default 。

總結(jié)

gulp的簡(jiǎn)單使用先介紹這里，下一篇明河將深入講解gulp的細(xì)節(jié)，同時(shí)指明Gulp.js為什么比Grunt來(lái)得優(yōu)秀。