流行得前端構建工具比較，以及gulp配置

前端如今三足鼎立的構建工具（不算比較老的ant，yeoman），非fis，grunt，gulp莫屬了。

fis用起來最簡單，我打算本身得項目中使用一下fis.

先說一下gulp安裝吧。

第一步：安裝node和npm,搭建node環境。

訪問 http://nodejs.org。npm會隨着安裝包一塊兒安裝。

確保node 和npm安裝，若是以下兩個命令行沒有正確安裝得話，說明node沒有安裝正確。

$ node -v
  v0.12.6

$ npm -v
  2.11.2

第二步：安裝gulp

認識npm:NPM是基於命令行的node包管理工具，它能夠將node的程序模塊安裝到項目中，在它的 官網 中能夠查看和搜索全部可用的程序模塊。

sudo npm install -g gulp 

1. sudo是以管理員身份執行命令，通常會要求輸入電腦密碼

2. npm是安裝node模塊的工具，執行install命令

3. -g表示在全局環境安裝，以便任何項目都能使用它

4. 最後，gulp是將要安裝的node模塊的名字
5. 完成後，在終端（Terminal）輸入命令行，查看gulp有沒有安裝成功

   yangh1deMac-mini:static_global yangh1$ gulp -v
   CLI version 3.9.0Local version 3.9.0

6. 咱們須要將gulp安裝到項目本地

• npm install —-save-dev gulp

  這裏，咱們使用 —-save-dev 來更新package.json文件，更新devDependencies 值，以代表項目須要依賴gulp。Dependencies 能夠向其餘參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關係，想要更加深刻的瞭解它能夠看看 package.json文檔 。

 第三步：新建Gulpfile文件，運行gulp

安裝好gulp後咱們須要告訴它要爲咱們執行哪些任務，首先，咱們本身須要弄清楚項目須要哪些任務。

• 檢查Javascript
• 編譯Sass（或Less之類的）文件
• 合併Javascript
• 壓縮並重命名合併後的Javascript

安裝依賴，提醒下，若是以上命令提示權限錯誤，須要添加 sudo 再次嘗試。

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

新建gulpfile文件

如今，組件都安裝完畢，咱們須要新建gulpfile文件以指定gulp須要爲咱們完成什麼任務。

gulp只有五個方法： task ， run ， watch ， src ，和 dest ，在項目根目錄新建一個js文件並命名爲 gulpfile.js ，把下面的代碼粘貼進去：//// 引入 gulp

var gulp = require('gulp'); // 引入組件
var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

// 檢查腳本
gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 編譯Sass
gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); // 合併，壓縮文件
gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默認任務
gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監聽文件變化
    gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });

1.引入組件：咱們引入了核心的gulp和其餘依賴組件，接下來，分開建立lint, sass, scripts 和 default這四個不一樣的任務。

2.Lint:Link任務會檢查 js/ 目錄下得js文件有沒有報錯或警告。

3.sass任務：Sass任務會編譯 scss/ 目錄下的scss文件，並把編譯完成的css文件保存到/css 目錄中。

4.Scripts任務：scripts任務會合並 js/ 目錄下得全部得js文件並輸出到 dist/ 目錄，而後gulp會重命名、壓縮合並的文件，也輸出到 dist/ 目錄。

5.defaul任務：咱們建立了一個基於其餘任務的default任務。使用 .run() 方法關聯和運行咱們上面定義的任務，使用 .watch() 方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其餘任務。

多看一些

gulp和grunt比較不錯得文章：http://www.jianshu.com/p/3779f708f5d7/  我以爲寫得比較清晰。

                                          https://segmentfault.com/a/1190000002491282

                                          http://www.ydcss.com/archives/18     目前發現寫得最簡單清晰gulp入門教程

Gruntfile維護起來那麼困難，有幾個緣由：

• 配置和運行分離
  程序員都知道，變量的聲明和使用挨在一塊兒，最方便理解和修改。但Gruntfile裏，配置Task和調用它們的地方離得很遠，極大地增長了心智負擔。

• 每一個插件作的事太多
  每一個Task的結果必須寫到磁盤文件，另外一個Task再讀，損害性能卻是小事，更麻煩的是讓整個過程變複雜了。
  就像一個個小做坊，來料加工又返回給客戶，這中間的溝通成本、出錯機會都大大增長。

• 配置項過多
  作事多了，配置項天然也多。至少輸入和輸出的位置得配吧。每一個插件的配置規則還不盡相同。用每一個插件，都得去學習一番。

    

Gulp是怎麼解決的：

• 配置和運行分離
  code over configuration，直接就在調用的地方配置。

• 每一個插件作的事太多
  單一職責，依靠組合來發揮做用。就像一條自動化生產線，上一道工序的產出直接交給下一步，效率不要過高。

• 配置項過多既然你們都遵循同一個協議，不少配置就不須要了。