[翻譯]Gulp.js簡(jiǎn)介_(kāi)html/css_WEB-ITnose

你可能設(shè)想大家都會(huì)記住所有的這些操作，但總會(huì)有人忘記一兩條。隨著項(xiàng)目越來(lái)越大，上面的工作越來(lái)越浪費(fèi)時(shí)間。只好設(shè)專人來(lái)完成這些枯燥的工作。

能不能讓這些工作不用占用人手呢？

你需要一個(gè)自動(dòng)化的運(yùn)行程序或構(gòu)建過(guò)程，這聽(tīng)起來(lái)很復(fù)雜

雖然在搭建這個(gè)構(gòu)建過(guò)程比單獨(dú)執(zhí)行每個(gè)小任務(wù)要復(fù)雜得多，但隨著應(yīng)用越廣，你可以節(jié)省大量的時(shí)間和人力，而且也可以避免錯(cuò)誤。

采取注重實(shí)效的解決方案：

我們將討論一些新的工具和概念。

1. Node.js-我們將使用node.js，但不用對(duì)它了解太深，只要知道一些javascript知識(shí)，并會(huì)用搜索引擎就好了。
2. 命令行-你得會(huì)輸入命令，雖然沒(méi)有圖形界面，但一些命令都很簡(jiǎn)單。

grunt vs gulp

你可能聽(tīng)過(guò)grunt，grunt是基于node.js的構(gòu)建工具

gulp是一個(gè)新的基于node.js的構(gòu)建工具

grunt和gulp做同樣的事。grunt出來(lái)更早，發(fā)展得也不錯(cuò)，可以找到很多的插件和資源，而且可以找到很多教程。這是一個(gè)很牛的工具，如果你已經(jīng)很熟悉這個(gè)工具了，有哪些問(wèn)題會(huì)讓你替換掉它呢?

沒(méi)有完美的工具，gulp.js被開(kāi)發(fā)出來(lái)解決一些grunt無(wú)法解決的問(wèn)題：

不是每個(gè)人都覺(jué)得最后一條，gulp比grunt好，但建議查看一下gulp的演示幻燈片然后自己判斷。

最重要的是gulp是基于流的概念。想想一下，你的文件通過(guò)一個(gè)管道，在沿著該管道的一個(gè)或多個(gè)點(diǎn)上一些操作被執(zhí)行。（很像流水線）

例如我們可以把我們所有的js文件放到一個(gè)script管道，其中

1. 合并為一個(gè)文件
2. 刪除調(diào)試代碼
3. 壓縮代碼
4. 把生成的文件放到指定目錄

數(shù)據(jù)輸入到一個(gè)方法。該方法輸出的新數(shù)據(jù)被下一個(gè)方法使用。這讓人感覺(jué)很像jQuery的鏈?zhǔn)秸{(diào)用，例如

$("#element").text("hello world!").addClass("myclass").fadeIn();

理論講完了，下面動(dòng)手使用gulp吧。

第1步：安裝Node.js

可以到官網(wǎng)下載你電腦系統(tǒng)對(duì)應(yīng)的版本，具體怎么安裝自己百度吧。

安裝完成后，打開(kāi)命令行，輸入

node -v

如顯示你當(dāng)前安裝的node版本。下面同樣可以輸入

npm -v

查看node.js的包管理器的版本信息。

如果哪個(gè)命令失敗，檢查一下你是不是命令輸入錯(cuò)誤了。如果沒(méi)錯(cuò)，那更好，說(shuō)明你node安裝成功了。

第2步：安裝gulp

使用npm安裝gulp，需要添加-g標(biāo)識(shí)把gulp安裝到全局環(huán)境，可以在使其在任意項(xiàng)目中使用。

npm install gulp -g

如果使用的是mac或linux，需要在命令前加sudo，切換到管理員權(quán)限。

sudo npm install gulp -g

輸入下面命令查看一下gulp是否安裝成功

gulp -v

第3步：配置項(xiàng)目

舉個(gè)例子，比如你的項(xiàng)目文件夾為test,首先切換到項(xiàng)目文件夾

cd test

根據(jù)不同的系統(tǒng),window可以用dir,mac/linus用ls查看文件目錄

我們的test文件夾，包括下面的子文件夾

（build文件夾是我們的生成目錄，是通過(guò)自動(dòng)化任務(wù)生成的）

首先，在項(xiàng)目里安裝gulp

npm install gulp --save-dev

這個(gè)命令會(huì)在test里創(chuàng)建用于存放gulp和它插件的node_modules文件夾

最后，在test文件夾里創(chuàng)建一個(gè)空的gulpfile.js配置文件。這里放我們要聲明的任務(wù)。

第4步：安裝第1個(gè)gulp插件

gulp不能自己就工作，你必須安裝和配置插件來(lái)執(zhí)行特定任務(wù)。首先安裝jshint,用于檢測(cè)我們的js源文件的質(zhì)量。安裝命令如下

npm install gulp-jshint --save-dev

打開(kāi)gulpfile.js文件，添加以下代碼

// include gulpvar gulp = require('gulp'); // include plug-insvar jshint = require('gulp-jshint');// JS hint taskgulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});

上面代碼的意思是。

1. 引用gulp
2. 把gulp-jshint插件對(duì)象放到j(luò)shint變量中
3. 聲明一個(gè)新的gulp任務(wù)jshint。這個(gè)把所有在src/scripts內(nèi)的js文件輸入到j(luò)shint對(duì)象中，并把發(fā)現(xiàn)的錯(cuò)誤輸出到控制臺(tái)。

保存gulpfile.js文件，并且在命令行運(yùn)行任務(wù)，如下

gulp jshint

你會(huì)在控制臺(tái)得到以下信息：

[gulp] Using file D:\test\gulpfile.js[gulp] Working directory changed to D:\test[gulp] Running 'jshint'...[gulp] Finished 'jshint' in 8.24 msD:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.1 error

第5步：添加其它任務(wù)

讓我們多嘗試一些插件。我們將查找src/images文件夾下，新圖片或修改圖片，把它們壓縮并輸出到build/images文件夾里。要做到這些，我們需要安裝gulp-changed和gulp-imagemin兩個(gè)插件。

npm install gulp-changed --save-devnpm install gulp-imagemin --save-dev

接下來(lái)在gulpfile.js文件中引用它們。

var changed = require('gulp-changed');var imagemin = require('gulp-imagemin');

并且添加一個(gè)新gulp任務(wù)，用于執(zhí)行插件

// minify new imagesgulp.task('imagemin', function() { var imgSrc = './src/images/**/*', imgDst = './build/images'; gulp.src(imgSrc) .pipe(changed(imgDst)) .pipe(imagemin()) .pipe(gulp.dest(imgDst));});

保存gulpfile.js，然后在命令行運(yùn)行下面的命令

gulp imagemin

圖片會(huì)被壓縮并保存到生成目錄對(duì)應(yīng)的文件夾中，并且在控制臺(tái)會(huì)得到下面的信息

[gulp] Using file D:\test\gulpfile.js[gulp] Working directory changed to D:\test[gulp] Running 'imagemin'...[gulp] Finished 'imagemin' in 5.71 ms[gulp] gulp-imagemin: ? battery.png (saved 2.7 kB)[gulp] gulp-imagemin: ? app.png (saved 3.2 kB)[gulp] gulp-imagemin: ? tick.png (saved 2.8 kB)

相同的方法，我們可以添加gulp-minify-html插件，用于壓縮所有src下的html文件

npm install gulp-minify-html --save-dev

修改gulpfile.js文件，添加新任務(wù)htmlpage

// include plug-insvar minifyHTML = require('gulp-minify-html');// minify new or changed HTML pagesgulp.task('htmlpage', function() { var htmlSrc = './src/*.html', htmlDst = './build'; gulp.src(htmlSrc) .pipe(changed(htmlDst)) .pipe(minifyHTML()) .pipe(gulp.dest(htmlDst));});

保存gulpfile.js，然后測(cè)試一下html的壓縮

gulp htmlpage

很簡(jiǎn)單吧？下面來(lái)使用一下js相關(guān)的插件，對(duì)源文件進(jìn)行合并，壓縮，去除調(diào)試代碼的插件。

還是先安裝

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

在gulpfile.js添加一個(gè)新任務(wù)scripts

// include plug-insvar concat = require('gulp-concat');var stripDebug = require('gulp-strip-debug');var uglify = require('gulp-uglify');// JS concat, strip debugging and minifygulp.task('scripts', function() { gulp.src(['./src/scripts/lib.js','./src/scripts/*.js']) .pipe(concat('script.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/'));});

這個(gè)例字中，我們使用一個(gè)數(shù)組給gulp.src方法傳值。這樣可以讓js按照給定的順序進(jìn)行合并和壓縮，可以解決一些依賴的問(wèn)題。和上面一樣，保存，然后運(yùn)行任務(wù)

gulp scripts

最后讓我們來(lái)處理一下css文件，使用添加瀏覽器前綴插件，壓縮插件。

安裝

npm install gulp-autoprefixer --save-dev npm install gulp-minify-css --save-dev

更新gulpfile.js文件

// include plug-insvar autoprefix = require('gulp-autoprefixer');var minifyCSS = require('gulp-minify-css');// CSS concat, auto-prefix and minifygulp.task('styles', function() { gulp.src(['./src/styles/*.css']) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('./build/styles/'));});

最后運(yùn)行

gulp styles

給autoprefixer插件，傳入以字符串或數(shù)組形式的瀏覽器支持配置，這里我們希望支持所有最新兩個(gè)版本的瀏覽器。它會(huì)把每個(gè)屬性按照caniuse.com里的數(shù)據(jù)進(jìn)行對(duì)照，需要添加前綴則添加?？梢员苊饷看稳ナ止げ樵儾⑻砑訉?duì)應(yīng)前綴。

在這些例子中我們只是演示了幾個(gè)有用的插件，你也可以自己到npmjs.org里去查找你需要的。其它一些有用的插件有：

第6步：自動(dòng)化任務(wù)

到現(xiàn)在為止，我們都是一次運(yùn)行一個(gè)任務(wù)，gulp允許我們?cè)谝粋€(gè)任務(wù)中執(zhí)行所有它依賴的子任務(wù)。下面在gulpfile.js中創(chuàng)建一個(gè)default任務(wù)

// default gulp taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});

然后在命令行運(yùn)行下面命令

gulp

所有任務(wù)都是按照順序執(zhí)行。

但這樣還是太麻煩了，每次都要執(zhí)行。gulp可以使用watch方法來(lái)監(jiān)聽(tīng)你的文件夾，如果有變化，會(huì)執(zhí)行一個(gè)任務(wù)來(lái)完成。下面我們修改一下default任務(wù)，使其可以監(jiān)聽(tīng)html,css,js,image文件的變化。

// default gulp taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() { // watch for HTML changes gulp.watch('./src/*.html', function() { gulp.run('htmlpage'); }); // watch for JS changes gulp.watch('./src/scripts/*.js', function() { gulp.run('jshint', 'scripts'); }); // watch for CSS changes gulp.watch('./src/styles/*.css', function() { gulp.run('styles'); });});

現(xiàn)在我們?cè)龠\(yùn)行

gulp

程序會(huì)一直保持激活狀態(tài)并在你改變文件時(shí)運(yùn)行。你不再需要每次都運(yùn)行任務(wù)了。

第7步：效果

使用上面的方法對(duì)項(xiàng)目進(jìn)行處理，可以減少50%的頁(yè)面體積。當(dāng)你花上幾個(gè)小時(shí)學(xué)習(xí)一下gulp，它比grunt學(xué)習(xí)起來(lái)容易。希望這個(gè)教程對(duì)你有用，并且可以讓你動(dòng)手去搭建一個(gè)自己的gulp構(gòu)建工具。

相關(guān)鏈接：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com