什麼是gulp

什麼是gulp

gulp 英 [gʌlp] 狼吞虎嚥地吃；大口地吸

gulp 自己有狼吞虎嚥的意思，最主要是經過各類 Transform Stream 來實現文件的處理，而後再進行輸出。Transform Streams 是NodeJS Stream 的一種，是可讀又可寫的，它會對傳給它的對象作一些轉換的操做。
說人話就是對文件(js,sass,less...)寫入內存，進行任務處理，再寫出到磁盤。
gulp的只提供幾個api：

gulp.src：獲取文件
gulp.dest：寫入文件
gulp.tasks：註冊任務
gulp.watch：監控文件的改動

開始 gulp

安裝 gulp 須要 基於 nodejs ，因此先理解幾個概念：

一、node.js 是什麼？ Node.js是一個Javascript運行環境(runtime)。 其實是對 google 引擎 v8
作了封裝。也就是說，原本一個js 文件是要在瀏覽器才能執行的 ， 但有了 nodeJs 運行環境，你的 IDE 就能夠執行 js
文件了，不須要跑在瀏覽器執行！！

二、npm 是什麼？ 正由於 nodeJs 的好用 ，因此後人就陸續開發了好多 node 插件 ，而 npm 及是 nodeJs 的
包管理器 ，用於 node 插件管理（包括安裝、卸載、管理依賴等）。因此 node 插件（下面的 gulp 工具） 就能夠利用 npm 來進行安裝或卸載咯。

三、gulp 是什麼？ 說白了就是一個 自動構建工具 gulp是基於Nodejs的自動任務運行器，
她能自動化地完成javascript/coffee/sass/less/html/image/css
等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

一、安裝 node.js

因此呢，第一步先安裝 node.js ----> node.js 官網

到官網下載下來安裝即是，這裏很少解釋，
而後簡單檢查一下是否安裝成功：

node -v  // 正常狀況輸出你安裝的 node  版本號

npm -v    // 正常狀況輸出你安裝的 npm 版本號

二、安裝 gulp

接下來安裝 gulp

npm install -g gulp

若是提示錯誤就 從新輸入 ： sudo npm install -g gulp
-g表示在全局環境安裝，以便任何項目都能使用它

稍等片刻，安裝完畢一樣檢查一下版本號，看是否安裝成功：

gulp -v   // 正常狀況輸出你安裝的 gulp 版本號

接下來新建個文件夾，用來存放你的新工程，

三、在跟目錄下建立 package.json文件：

package.json文件有什麼用呢？
是爲了指明項目在開發環境和生產環境中的node模塊依懶關係。其實它還有一個重要的功能就是開源庫的版本依賴管理，這個要解釋還須要點篇幅，放在文章最後面解釋吧

要生成 package.json文件 只需在你的項目根目錄執行 npm init 就行：

四、選擇安裝你所需的依賴

好比上面提到的 檢查 js 文件的 gulp-jshint 依賴，將 sass 編譯成 css 的 gulp-sass 依賴等等...
執行在你所在的根目錄下執行下面命令：

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

這時，你的項目目錄就有以下內容：

五、新建gulpfile.js 文件

爲何 gulp 項目能自動檢測 js 代碼的錯誤呢，就應爲 有了 gulpfile文件在起做用：

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 , 會將 scss/文件夾下的 .scss 文件編譯成 .css 文件放在 /css文件夾下
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合併，壓縮文件，將 js文件夾下的js文件合併壓縮成 all.js 放在 /dist文件夾下
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');

    // 監聽文件變化，有了監聽，當你編寫 js 或 sacc 文件時就會自動編譯
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

將上面的代碼 gulpfile.js 保存到 更目錄下就能夠開始你的 項目咯！

六、運行 帶有gulp構建工具的 項目：

上面鍵好項目後，建立個 js文件夾，裏面有兩個測試用的 js 文件

裏面的代碼是：

$(function () {

alert(" test_js1");

});

七、而後啓動構建工具 gulp

用 WebStrom 打開你的項目：

當編譯不成功，出現 不支持 gulp.run 怎麼辦

將代碼：

// 默認任務
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 監聽文件變化，有了監聽，當你編寫 js 或 sacc 文件時就會自動編譯
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

替換成下面的

// 默認任務
gulp.task('default', function(){
    // 監聽文件變化
    gulp.watch('./js/*.js', ['lint', 'sass', 'scripts']);
});

你的項目多出了這些文件：

打開 all.js
發現它將 我們建立的兩個 js 文件合併到一塊了！！！

這裏小提示一下，爲何要把 js 文件 合併到一個
總的js文件裏呢？減小網絡請求呀，一個js文件才請求一次，要是你的項目有多個js文件那不得請求屢次，不利於優化。 all.min.js 是對
all.js 的壓縮

這就是 自動化構建工具 gulp ！！！