建站
咨詢
售后
建站咨詢
新聞中心
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、永福ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的永福網(wǎng)站制作公司
在軟件開發(fā)中，任務(wù)運行器的好處是不言而喻的。它們可以幫助自動運行常見的冗長的任務(wù)，讓你可以專注于更重要的事情中，比如敲出很棒的代碼。說的嚴(yán)肅點，自動運行一些比如圖片壓縮、代碼壓縮、單元測試以及更多的任務(wù)的技能，簡直就是節(jié)省時間的利器。
對于很多前端開發(fā)者而言，時下使用最多的任務(wù)管理器就是Grunt了，一個可以讓你在Gruntfile.js文件中使用JavaScript定義 各種運行任務(wù)的工具?；旧?，只要你了解JavaScript，創(chuàng)建一個Grunt任務(wù)是非常簡單直接的事情。豐富的第三方插件比如 JSHint,Sass還有Uglify等等，讓Grunt成為最易擴(kuò)展的工具之一。
對于多數(shù)人來講，一直以來都選擇Grunt作為任務(wù)運行器。不過最近，因為易于安裝，擁有更加易讀和管理的超級簡單的配置文件，一個叫Gulp.js的工具吸引了大批人的眼球。
安裝Gulp.js
Gulp.js跟Grunt一樣，都是基于Node的任務(wù)運行工具。所以你必須安裝Node來運行它。有幾種不同的方法可以安裝Gulp，取決于你 的操作系統(tǒng)。在OS X中，我用nvm，這是Tim Caswell寫的用于管理多個Node.js版本的很不錯的腳本工具。你也可以直接從Node.js官方網(wǎng)站下載二進(jìn)制 文件。如果你對Node還一無所知的話，那我建議你最好去Nettuts+series先熟悉一下Node.js。
我們可以用npm（Node包管理器）來快速安裝Gulp。打開你的終端然后輸入:
- npm install -g gulp
這條指令，從npm的注冊機(jī)制中獲取gulp并全局安裝到你的系統(tǒng)中，以便你可以直接在命令行中訪問它。
安裝好了gulp，下面我們開始在項目中來使用它。
使用Gulp.js創(chuàng)建你的項目
要在項目中使用Gulp，必須完成下面關(guān)鍵幾點：
-
安裝兩個依賴包
-
安裝任何你想使用的插件
-
創(chuàng)建Gulp.js文件然后定義你打算運行的任務(wù)
請在項目的路徑下完成以上幾點，這樣Gulp才能使用你的配置文件。
首先，安裝依賴包：
- npm install --save-dev gulp gulp-util
現(xiàn)在我們需要安裝在配置文件中定義好的用來運行指定任務(wù)的Gulp插件。這些插件都是Node包，所以我們再次使用npm來安裝它們。
- npm install --save-dev gulp-uglify gulp-concat
我這里安裝兩個插件，讓我可以使用Uglify.js壓縮器來精簡/壓縮JavaScript代碼并且將多個JS文件合并到一個文件中去。
注意，我這里用的—save-dev，這個指令讓我只在當(dāng)前項目中安裝Gulp依賴包跟插件。這么做可以在package.json中的devDependencies列表中為每個依賴項生成對應(yīng)的詞條標(biāo)識。就像下面展示的：
- {
- "devDependencies": {
- "gulp-util": "~2.2.13",
- "gulp": "~3.5.0",
- "gulp-uglify": "~0.2.0",
- "gulp-concat": "~2.1.7"
- }
- }
這樣可以確保使用npm為項目安裝任何依賴包和插件。如果在項目中沒有package.json文件，那在命令行輸入npm init或者干脆在編輯器中手動創(chuàng)建一個，寫好對應(yīng)的卷括號，然后保存命名為”package.json”。在命令行中輸入npm指令來更新它。請注意， 必須要使用卷括號，不然，當(dāng)你試圖使用—save-dev時，npm會拋出一個錯誤顯示它不是一個合法的JSON文件。
雖然在本篇指南中我只用了兩個插件，不過Gulp提供了超過200個插件來滿足不同的功能需求，包括：
-
LiveReload(gulp-livereload)
-
JSHint(gulp-jshint)
-
Sass(gulp-sass)
-
CoffeeScript file compilation(gulp-coffee)
還有好多好多···
Gulpfile.js文件
跟Grunt一樣，Gulp有一個叫做gulpfile.js的同名配置文件，里面定義了運行任務(wù)的所有的必須的插件。你要在項目的根目錄下創(chuàng)建這個文件。
簡單直白的語法，讓gulp文件非常易讀能懂：
- var gulp = require('gulp'),
- gutil = require('gulp-util'),
- uglify = require('gulp-uglify'),
- concat = require('gulp-concat');
上面代碼簡單告訴gulp需要引用哪些插件來完成既定的任務(wù)。
下一步，我們需要定義Gulp運行的任務(wù)。我這里，定義兩個：
-
壓縮圖片
-
精簡JS文件
我們使用Gulp的方法task()來定義要運行的任務(wù)：
- gulp.task('js', function () {
- gulp.src('./js/*.js')
- .pipe(uglify())
- .pipe(concat('all.js'))
- .pipe(gulp.dest('./js'));
- });
看看上面的代碼，用的是引用的插件組成的一個混合方法調(diào)用。第一個方法task(),使用一個名稱代表當(dāng)前任務(wù)（這里就叫’js’），還有一個匿名方法囊括了實際的操作。我們來拆解一下代碼：
- gulp.src('./js/*.js')
src()方法指定了要從哪里找到需要壓縮的JS文件，并且將其轉(zhuǎn)換成包含文檔結(jié)構(gòu)的數(shù)據(jù)流以傳入后續(xù)運行的插件中。這是Node.js Streams API中的一部分，也正是Gulp擁有簡明API語法的原因之一。
- .pipe(uglify())
pipe()方法從src()方法中獲得傳過來的數(shù)據(jù)流，然后傳入指定的插件中。在當(dāng)前例子中，插件uglify將接收數(shù)據(jù)流。
- .pipe(concat('all.js'))
像uglify一樣，插件concat通過pipe()接收傳過來的數(shù)據(jù)流，然后將多個JS文件合并到’all.js’中。
- .pipe(gulp.dest('./js'));
最后，使用Gulp的dest()方法，將all.js寫到指定目錄中，整個過程簡介易讀。
還有最后一個我們要做的事情，就是更改Gulp的默認(rèn)運行任務(wù)為”js”。
- gulp.task('default', function(){
- gulp.run('js');
- });
返回到命令行，輸入’gulp’，Gulp找到了gulpfile.js文件，加載所有的依賴項跟插件，運行默認(rèn)任務(wù)’js’。你可以在下圖看到最后的運行結(jié)果，文件被壓縮合并了:
讓我們更近一步吧。Gulp提供了另外一個方法叫watch()，它可以監(jiān)視指定的資源變更。跟手動輸入’gulp’運行任務(wù)不同，這個方法允許根據(jù)資源的改變自動運行任務(wù)。
- gulp.watch('./js/*', function () {
- gulp.run('js');
- });
當(dāng)上面的代碼運行的時候，Gulp會繼續(xù)保持對指定資源的監(jiān)視，一旦資源發(fā)生變更，就會再次運行’js’方法。這個功能很棒！
向Gulp.js過渡
當(dāng)我剛聽說Gulp的時候，我第一反應(yīng)就是“又一個超棒的工具！”。Gulp.js確實擁有著吸引人的語法跟API，它讓構(gòu)建任務(wù)變得輕而易舉。盡管插件沒有Grunt豐富，但是它的插件庫看起來已經(jīng)在日趨增長，特別是現(xiàn)在擁有著對它感興趣的這么多的開發(fā)者。
我已經(jīng)建議很多開發(fā)者讓他們積極地遷移到Gulp中來，現(xiàn)在是加入Gulp.js的大好時機(jī)！
譯文鏈接：http://www.codeceo.com/article/gulp-js-guide.html
英文原文：Managing Your Build Tasks With Gulp.js
網(wǎng)頁名稱：前端任務(wù)構(gòu)建利器Gulp.js使用指南
當(dāng)前路徑：http://www.5511xx.com/article/djhgeej.html
