什么是gulp

gulp 英 [g?lp] 狼吞虎咽地吃；大口地吸

gulp 本身有狼吞虎咽的意思，最主要是通過各種 Transform Stream 來實(shí)現(xiàn)文件的處理，然后再進(jìn)行輸出。Transform Streams 是NodeJS Stream 的一種，是可讀又可寫的，它會(huì)對(duì)傳給它的對(duì)象做一些轉(zhuǎn)換的操作。
說人話就是對(duì)文件(js,sass,less...)寫入內(nèi)存，進(jìn)行任務(wù)處理，再寫出到磁盤。
gulp的只提供幾個(gè)api：

gulp.src：獲取文件
gulp.dest：寫入文件
gulp.tasks：注冊(cè)任務(wù)
gulp.watch：監(jiān)控文件的改動(dòng)

開始 gulp

安裝 gulp 需要 基于 nodejs ，所以先理解幾個(gè)概念：

1、node.js 是什么？ Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)。 實(shí)際上是對(duì) google 引擎 v8
做了封裝。也就是說，本來一個(gè)js 文件是要在瀏覽器才能執(zhí)行的 ， 但有了 nodeJs 運(yùn)行環(huán)境，你的 IDE 就可以執(zhí)行 js
文件了，不需要跑在瀏覽器執(zhí)行！！

2、npm 是什么？ 正因?yàn)?nodeJs 的好用 ，所以后人就陸續(xù)開發(fā)了好多 node 插件 ，而 npm 及是 nodeJs 的
包管理器 ，用于 node 插件管理（包括安裝、卸載、管理依賴等）。所以 node 插件（下面的 gulp 工具） 就可以利用 npm 來進(jìn)行安裝或卸載咯。

3、gulp 是什么？ 說白了就是一個(gè) 自動(dòng)構(gòu)建工具 gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器，
她能自動(dòng)化地完成javascript/coffee/sass/less/html/image/css
等文件的的測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。

1、安裝 node.js

所以呢，第一步先安裝 node.js ----> node.js 官網(wǎng)

到官網(wǎng)下載下來安裝便是，這里不多解釋，
然后簡(jiǎn)單檢查一下是否安裝成功：

node -v // 正常情況輸出你安裝的 node 版本號(hào)

npm -v // 正常情況輸出你安裝的 npm 版本號(hào)

2、安裝 gulp

接下來安裝 gulp

npm install -g gulp

如果提示錯(cuò)誤就 重新輸入 ： sudo npm install -g gulp
-g表示在全局環(huán)境安裝，以便任何項(xiàng)目都能使用它

稍等片刻，安裝完畢同樣檢查一下版本號(hào)，看是否安裝成功：

gulp -v // 正常情況輸出你安裝的 gulp 版本號(hào)

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

3、在跟目錄下創(chuàng)建 package.json文件：

package.json文件有什么用呢？
是為了指明項(xiàng)目在開發(fā)環(huán)境和生產(chǎn)環(huán)境中的node模塊依懶關(guān)系。其實(shí)它還有一個(gè)重要的功能就是開源庫(kù)的版本依賴管理，這個(gè)要解釋還需要點(diǎn)篇幅，放在文章最后面解釋吧

要生成 package.json文件 只需在你的項(xiàng)目根目錄執(zhí)行 npm init 就行：

image.png

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

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

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

這時(shí)，你的項(xiàng)目目錄就有如下內(nèi)容：

image.png

5、新建gulpfile.js 文件

為什么 gulp 項(xiàng)目能自動(dòng)檢測(cè) js 代碼的錯(cuò)誤呢，就應(yīng)為 有了 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 , 會(huì)將 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'));
});

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

    // 監(jiān)聽文件變化，有了監(jiān)聽，當(dāng)你編寫 js 或 sacc 文件時(shí)就會(huì)自動(dòng)編譯
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

將上面的代碼 gulpfile.js 保存到 更目錄下就可以開始你的 項(xiàng)目咯！

6、運(yùn)行 帶有g(shù)ulp構(gòu)建工具的 項(xiàng)目：

上面鍵好項(xiàng)目后，創(chuàng)建個(gè) js文件夾，里面有兩個(gè)測(cè)試用的 js 文件

image.png

里面的代碼是：

$(function () {

alert(" test_js1");

});

7、然后啟動(dòng)構(gòu)建工具 gulp

用 WebStrom 打開你的項(xiàng)目：

image.png

當(dāng)編譯不成功，出現(xiàn) 不支持 gulp.run 怎么辦

將代碼：

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

    // 監(jiān)聽文件變化，有了監(jiān)聽，當(dāng)你編寫 js 或 sacc 文件時(shí)就會(huì)自動(dòng)編譯
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

替換成下面的

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

你的項(xiàng)目多出了這些文件：

image.png

打開 all.js
發(fā)現(xiàn)它將 咱們創(chuàng)建的兩個(gè) js 文件合并到一塊了！?。?/p>

image.png

這里小提示一下，為什么要把 js 文件 合并到一個(gè)
總的js文件里呢？減少網(wǎng)絡(luò)請(qǐng)求呀，一個(gè)js文件才請(qǐng)求一次，要是你的項(xiàng)目有多個(gè)js文件那不得請(qǐng)求多次，不利于優(yōu)化。 all.min.js 是對(duì)
all.js 的壓縮

這就是 自動(dòng)化構(gòu)建工具 gulp ?。?！

轉(zhuǎn)載自：曾田生z 的博客文章