gulp是前端開發過程中自動構建專案的工具，相同作用的還有grunt。構建工具依靠外掛能夠自動監測檔案變化以及完成js/sass/less/html/image/css/coffee等檔案的語法檢查、合併、重新命名、壓縮、格式化、瀏覽器自動重新整理、部署檔案等功能。

gulp是基於Nodejs的自動執行器，他借鑑了Unix作業系統的管道（pipe）思想，前一級的輸出是後一級的輸入。下面是具體流程：

1、安裝nodejs
nodejs下載地址：https://nodejs.org/

nodejs自帶npm模組管理器，安裝完成之後開啟dos命令視窗輸入 node -v就能檢視nodejs是否安裝成成功

常用的npm命令

npm init——初始化

npm install——安裝外掛

npm install plugname -g——全域性安裝

npm install [email protected]——安裝具體某個版本的外掛

npm update——更新外掛

npm uninstall——解除安裝外掛

常用dos命令

cd 進入某個目錄

cd.. 返回上一級

dir 檢視列表

cls 清除螢幕

del name 刪除檔案

md name 新建目錄名

rd name 刪除目錄名

copy con name.txt 新建檔案

del name.txt  刪除檔案

2、全域性安裝gulp
[plain] view plain copy
 
npm install gulp -g  
3、建立本地專案
上面是準備工作，安裝完全域性gulp之後，cd到專案資料夾安裝本地gulp，安裝之前要先初始化

[plain] view plain copy
 
npm init  

初始化的時候要求你輸入一些值，不輸的直接回車即可，點選y之後在根目錄自動建立了一個package.json檔案，這個檔案用來存放即將安裝的外掛name和version，這個檔案有什麼用呢？當我們把專案拷貝給別人的時候不需要拷貝外掛，只需要把專案檔案、package.json和gulp.file.js拷貝過去就可以，接收人cd到專案檔案目錄直接輸入npm install即可安裝上我們拷貝前安裝的各種外掛。

4、設計專案目錄索引結構
[plain] view plain copy
 
└── src/  
    ├── less/    *.less 檔案  
    ├── sass/    *.scss *.sass 檔案  
    ├── css/     *.css  檔案  
    ├── js/      *.js 檔案  
    ├── fonts/   字型檔案  
    └── images/   圖片  
└── dist/  

5、安裝各種外掛
[plain] view plain copy
 
npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev  
--save-dev這個命令是將安裝的外掛資訊寫入package.json檔案內的“devDependencies”屬性內，外掛全部安裝完之後package.json的變化為：

[plain] view plain copy
 
"devDependencies": {  
    "gulp": "^3.9.1",  
    "gulp-imagemin": "^2.3.0",  
    "gulp-minify-css": "^1.2.4",  
    "gulp-uglify": "^1.5.3",  
    "gulp-util": "^3.0.7",  
    "gulp-watch-path": "^0.1.0",  
    "stream-combiner2": "^1.1.1"  
  }  

外掛安裝完畢之後會自動建立一個node_modules資料夾，所有外掛的依賴都存在這裡面。

gulp——本地gulp
gulp-imagemin——圖片壓縮
gulp-minify-css ——css壓縮
gulp-uglify ——js壓縮
gulp-util ——控制檯程式碼著色
gulp-watch-path ——檔案很多時編輯那個哪個壓縮，不會全部壓縮（獲取改變的檔案的src和dest路徑）
stream-combiner2——有些 gulp 任務編譯出錯會終止 gulp.watch，使用 gulp-watch-path 配合stream-combiner2 可避免這種情況

6、gulp如何使用
控制檯輸入gulp的時候首先找尋gulpfile.js檔案，在找尋default任務，所以我們應該手動新建一個名為gulpfile.js的js檔案，將任務寫在裡面。具體檔案目錄為：

gulp一共五中方法：

gulp.task()——新建任務

gulp.src()——獲取檔案源地址

gulp.dest()——檔案輸出地址

gulp.run()——執行任務

gulp.watch()——監聽檔案修改

7、編寫gulpfile.js檔案
（1）引入外掛變數

[plain] view plain copy
 
var gulp = require('gulp'),  
    uglify = require('gulp-uglify'),  
    minifycss = require('gulp-minify-css'),  
    imgmin = require('gulp-imagemin'),  
    gutil = require('gulp-util'),  
    watchPath = require('gulp-watch-path'),  
    combiner = require('stream-combiner2');  

（2）新建程式碼著色與顯示錯誤日誌方法，這個方法用到了gulp-util和stream-combiner2外掛
[plain] view plain copy
 
var handleError=function(err){  
    console.log('\n');  
    gutil.log('fileName: '+gutil.colors.red(err.fileName));  
    gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));  
    gutil.log('message: ' + err.message);  
    gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));  
};  
（3）新建js批量壓縮任務

[plain] view plain copy
 
gulp.task('script',function(){//script時自定義的  
//將檔案的源路徑和釋出路徑賦值給相應變數  
    var srcJsPath='js/*.js';  
    var destJsPath='dist/js/';  
    var combined = combiner.obj([  
            gulp.src(srcJsPath),//獲取檔案源地址  
            uglify(),//執行壓縮  
            gulp.dest(destJsPath)//將壓縮的檔案釋出到新路徑  
        ]);  
    combined.on('error', handleError);//列印錯誤日誌  
});  

這種寫法需要css目錄下有很多css檔案，只要改變了一個點選儲存的時候gulp會把所有css檔案都會壓縮一遍，為了提高效能我們可以利用gulp-watch-path外掛只壓縮/釋出修改的檔案
[plain] view plain copy
 
gulp.task('watchjs',function(){  
    gulp.watch('js/*.js',function(event){  
    var paths=watchPath(event,'js/','dist/js/');  
        //列印修改型別和路徑  
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);  
        gutil.log('Dist: ' + paths.distPath);  
        //獲取錯誤資訊，繼續執行程式碼  
        var combined = combiner.obj([  
                gulp.src(paths.srcPath),  
                uglify(),  
                gulp.dest(paths.distDir)  
            ]);  
        combined.on('error', handleError);  
    });  
});  

（4）編寫default任務和監聽任務
新建批量任務還是監聽修改任務根據專案中實際需要去寫，等我們寫好很多工之後就需要寫入default中，default寫好之後只需要在dos視窗寫入gulp就可以自動執行任務

[plain] view plain copy
 
gulp.task('default',function(){  
    //預設執行的方法，引號內的內容對應上面task寫的內容  
    gulp.run('watchjs','css','images');  
    //監控js  
    gulp.watch('js/*.js',['watchjs']);  
    //監控css  
    gulp.watch('css/*.css',['css']);  
    //監控img  
    gulp.watch('images/*.*',['images']);  
});  

如果不想執行預設任務只執行js單檔案壓縮任務只需要輸入 gulp watchjs即可。控制檯輸入為下圖：

此時，gulp處於監聽狀態，如果要取消需要按ctrl+c 回車即可。
---------------------
作者：zhangwenwu的前端小站
來源：CSDN
原文：https://blog.csdn.net/zhangwenwu2/article/details/53114204
版權宣告：本文為博主原創文章，轉載請附上博文連結！