你可能設想大家都會記住所有的這些操作，但總會有人忘記一兩條。隨著項目越來越大，上面的工作越來越浪費時間。只好設專人來完成這些枯燥的工作。
能不能讓這些工作不用占用人手呢？
你需要一個自動化的運行程序或構建過程，這聽起來很復雜
雖然在搭建這個構建過程比單獨執行每個小任務要復雜得多，但隨著應用越廣，你可以節省大量的時間和人力，而且也可以避免錯誤。
采取注重實效的解決方案：
我們將討論一些新的工具和概念。
你可能聽過grunt，grunt是基于node.js的構建工具
gulp是一個新的基于node.js的構建工具
grunt和gulp做同樣的事。grunt出來更早，發展得也不錯，可以找到很多的插件和資源，而且可以找到很多教程。這是一個很牛的工具，如果你已經很熟悉這個工具了，有哪些問題會讓你替換掉它呢?
沒有完美的工具，gulp.js被開發出來解決一些grunt無法解決的問題：
不是每個人都覺得最后一條，gulp比grunt好，但建議查看一下gulp的演示幻燈片然后自己判斷。
最重要的是gulp是基于流的概念。想想一下，你的文件通過一個管道，在沿著該管道的一個或多個點上一些操作被執行。（很像流水線）
例如我們可以把我們所有的js文件放到一個script管道，其中
數據輸入到一個方法。該方法輸出的新數據被下一個方法使用。這讓人感覺很像jQuery的鏈式調用，例如
$("#element").text("hello world!").addClass("myclass").fadeIn();理論講完了，下面動手使用gulp吧。
可以到官網下載你電腦系統對應的版本，具體怎么安裝自己百度吧。
安裝完成后，打開命令行，輸入
node -v
如顯示你當前安裝的node版本。下面同樣可以輸入
npm -v
查看node.js的包管理器的版本信息。
如果哪個命令失敗，檢查一下你是不是命令輸入錯誤了。如果沒錯，那更好，說明你node安裝成功了。
使用npm安裝gulp，需要添加-g標識把gulp安裝到全局環境，可以在使其在任意項目中使用。
npm install gulp -g
如果使用的是mac或linux，需要在命令前加sudo，切換到管理員權限。
sudo npm install gulp -g
輸入下面命令查看一下gulp是否安裝成功
gulp -v
舉個例子，比如你的項目文件夾為test,首先切換到項目文件夾
cd test
根據不同的系統,window可以用dir,mac/linus用ls查看文件目錄
我們的test文件夾，包括下面的子文件夾
（build文件夾是我們的生成目錄，是通過自動化任務生成的）
首先，在項目里安裝gulp
npm install gulp --save-dev
這個命令會在test里創建用于存放gulp和它插件的node_modules文件夾
最后，在test文件夾里創建一個空的gulpfile.js配置文件。這里放我們要聲明的任務。
gulp不能自己就工作，你必須安裝和配置插件來執行特定任務。首先安裝jshint,用于檢測我們的js源文件的質量。安裝命令如下
npm install gulp-jshint --save-dev
打開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'));});上面代碼的意思是。
保存gulpfile.js文件，并且在命令行運行任務，如下
gulp jshint
你會在控制臺得到以下信息：
[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
讓我們多嘗試一些插件。我們將查找src/images文件夾下，新圖片或修改圖片，把它們壓縮并輸出到build/images文件夾里。要做到這些，我們需要安裝gulp-changed和gulp-imagemin兩個插件。
npm install gulp-changed --save-devnpm install gulp-imagemin --save-dev
接下來在gulpfile.js文件中引用它們。
var changed = require('gulp-changed');var imagemin = require('gulp-imagemin');并且添加一個新gulp任務，用于執行插件
// 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，然后在命令行運行下面的命令
gulp imagemin
圖片會被壓縮并保存到生成目錄對應的文件夾中，并且在控制臺會得到下面的信息
[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文件，添加新任務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，然后測試一下html的壓縮
gulp htmlpage
很簡單吧？下面來使用一下js相關的插件，對源文件進行合并，壓縮，去除調試代碼的插件。
還是先安裝
npm install gulp-concat --save-dev npm install gulp-strip-debug --save-dev npm install gulp-uglify --save-dev
在gulpfile.js添加一個新任務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/'));});這個例字中，我們使用一個數組給gulp.src方法傳值。這樣可以讓js按照給定的順序進行合并和壓縮，可以解決一些依賴的問題。和上面一樣，保存，然后運行任務
gulp scripts
最后讓我們來處理一下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/'));});最后運行
gulp styles
給autoprefixer插件，傳入以字符串或數組形式的瀏覽器支持配置，這里我們希望支持所有最新兩個版本的瀏覽器。它會把每個屬性按照caniuse.com里的數據進行對照，需要添加前綴則添加?？梢员苊饷看稳ナ止げ樵儾⑻砑訉熬Y。
在這些例子中我們只是演示了幾個有用的插件，你也可以自己到npmjs.org里去查找你需要的。其它一些有用的插件有：
到現在為止，我們都是一次運行一個任務，gulp允許我們在一個任務中執行所有它依賴的子任務。下面在gulpfile.js中創建一個default任務
// default gulp taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});然后在命令行運行下面命令
gulp
所有任務都是按照順序執行。
但這樣還是太麻煩了，每次都要執行。gulp可以使用watch方法來監聽你的文件夾，如果有變化，會執行一個任務來完成。下面我們修改一下default任務，使其可以監聽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'); });});現在我們再運行
gulp
程序會一直保持激活狀態并在你改變文件時運行。你不再需要每次都運行任務了。
使用上面的方法對項目進行處理，可以減少50%的頁面體積。當你花上幾個小時學習一下gulp，它比grunt學習起來容易。希望這個教程對你有用，并且可以讓你動手去搭建一個自己的gulp構建工具。
相關鏈接：
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
