談談Grunt,NPM,Gulp

隨着前端工程化的趨勢,產生了愈來愈多的構建工具,而其中比較優秀的就是grunt,npm,gulp,今天我來講說這三者間的區別以及他們的優缺點.

---

相信通常前端開發者選擇構建工具的時候,更多的是看我的習慣以及團隊的狀況.相信這三個構建工具總有一個會適合你的,咱們先來看看grunt.

Grunt

grunt是目前社區最成熟,插件支持最多的一個構建工具,不過它的配置項之多也經常被人詬病.下面就一個簡單的例子來講說它的用法.

grunt運行以前須要全局安裝命令行工具,本地安裝grunt插件

npm install -g grunt-cli

// 包裝函數 module.exports = function(grunt) { // 任務配置 grunt.initConfig({ concat: { foo: { files:{ 'dist/main.js': 'source/*.js' } } } }); // 加載鏈接文件插件 grunt.loadNpmTasks('grunt-contrib-concat'); // 測試合併任務 grunt.registerTask('concatdemo', ['concat:foo']); };

上面就是一個合併文件的例子,假如任務內的操做比較多的話,配置文件就很是多,grunt適合對nodejs不是很是熟悉的狀況下使用,並且自定義插件也很是方便,這個能夠看我以前寫的文章.

grunt在處理多個子功能的時候會頻繁的調用io來讀取文件,並且不支持任務模塊的重用,也就是說不能添加任務的依賴.不過入門很是容易,這些只是我本身的一些見解,也許最適合你的纔是最好的,下面咱們再來看看npm.

NPM

也許有些人會說npm不是包管理工具嗎?怎麼又成了構建工具了,其實它是能夠當成構建工具來用的,奧祕就在package.json文件裏的scripts屬性上.這裏是能夠定義當前模塊的一些構建功能的,好比當你開發一個有點規模的模塊的時候,開發與發佈引用的文件實際上是不同的,通常發佈的時候都會提供壓縮版或者一些測試用例,下面以一個簡單的例子來講明

 { "scripts": { "test": "phantomjs test/vendor/runner.js test/index.html?noglobals=true", "build": "uglifyjs underscore.js -c \"evaluate=false\" --comments \"/ .*/\" -m --source-map underscore-min.map -o underscore-min.js", "doc": "docco underscore.js" }, "devDependencies": { "docco": "0.6.x", "phantomjs": "1.9.0-1", "uglify-js": "2.4.x" }, }

上面的這個配置片斷是underscore類庫的配置,能夠看出上面的構建屬性有test,build,doc,這三個分別表明三個任務,運行命令以下

npm run

npm run後跟任務名就能夠,任務內容支持bash腳本,也支持npm模塊自己提供的命令行命令,像上面的uglifyjs自己就提供有命令行壓縮命令,運行npm run命令以前要保證devDependencies裏的依賴模塊已經安裝到本地,沒有的話可使用npm install命令安裝.

最後要說的是,任務的內容了能夠是自定義模塊,好比能夠像這樣的

 "scripts": { "demo": "./demo.js" }

demo.js

#!/usr/bin/env node console.log(__dirname); console.log(process.cwd());

注意運行命令以前須要確保系統有執行demo.js的權限,可使用

chmod 777 demo.js

打開訪問權限,而後咱們運行

npm run demo

就會看到輸出當前運行根目錄內容,並且這裏的js文件能夠寫不少自定義的東西.

最後要說明下,npm最適用於類linux系統,由於這些系統對命令支持很是友好,windows的話得安裝模擬*inux的命令行工具

npm通常用在我的項目裏,對於團隊項目則不適用.最後說下gulp.

Gulp

gulp跟grunt同樣支持跨平臺,不一樣於grunt須要Gruntfile.js,gulp須要Gulpfile.js,最核心的不一樣之處在於,gulp是以流爲核心的,而grunt是以配置加上文件io爲核心的.

gulp是流爲核心而後經過管道來輸入輸出各個子功能的內容以方便後續操做,這樣能夠提升io訪問效率,自定義插件方面要比grunt要求要高點,下面以一個簡單的例子看看它的用法.

運行gulp的系統要求

touch Gulpfile.js

npm install -g gulp

npm install gulp

 var gulp = require('gulp'), uglify = require('gulp-uglify'), size = require('gulp-size'); gulp.task('jsmin', function(){ return gulp .src('./app.js') .pipe(size()) .pipe(uglify()) .pipe(size()) .pipe(gulp.dest('dist/main')); });

gulp是以src爲開始,裏面傳遞任務須要的源文件,文件格式跟grunt相同,後面都是以pipe來傳輸前一步的輸出內容,最後能夠輸出到一個目標文件內經過dest方法.

gulp-size是一個統計管道里面內容的大小的,上面是用它來顯示出壓縮先後的大小用來對比用的.

gulp跟grunt同樣也支持任務裏包含多個子任務,像這樣的

 gulp.task('build', ['jshint', 'jsmin']); // 以 gulp build 命令來運行

不過跟grunt不同的是,上面的多個子運任務是異步執行的,而grunt是同步執行的.

gulp也支持像模塊裏的依賴注入,並且運行本身的任務以前它會保證依賴都運行完畢,像下面這樣的

gulp.task('test', ['jsmin'], function(){ return gulp .src('dist/main/*.js') .pipe(gulp.dest('build')); });

上面的代碼功能是當壓縮完js以後,把壓縮以後的文件內容從新copy到一個新的地方.

也許gulp惟一的缺點就是社區插件沒grunt豐富,可是隨着愈來愈多的人進入gulp,相信這個也不是問題.

總結

看了上面三個構建工具的分析,你們都喜歡用哪個呢,我的推薦用gulp,由於它代碼量少並且效率比grunt要高,不過仍是那句老話,適合本身的纔是最好的.