Gulp入門指南

安裝Gulp.js

---

Gulp是給予Node.js的，故首先安裝Node.js[1]，完成以後執行下面的命令安裝Gulp：

 

 

npm install -g gulp
//-g (global)執行全局安裝gulp，這樣在任何地方均可以進行 gulp 操做

安裝完成以後，須要在咱們的項目中使用，須要命令行切換到項目更目錄（能夠 右鍵 點擊項目目錄選擇 在此處打開命令窗口(W)）而後執行下面的命令：

    

 gulp init 
// 生成一個package.json，裏面是一些常規的配置信息

如圖所示，會須要設置一些name，version等屬性，通常一直按回車確認便可

     

完成以後在項目更目錄下多了一個package.json的文件，內容以下：

  npm install gulp --save-dev
     //將gulp安裝到項目目錄中，bing生成依賴信息於package.js內的 devDependencies

 

安裝Gulp插件

Gulp的任務都是以插件[2]的形式存在，因此在使用前，須要先安裝咱們用到的插件到項目目錄內，插件的安裝命令：

 

    

 npm install 插件名 --save-dev
//多個插件能夠用空格分隔
 
npm install gulp-util gulp-uglify gulp-concat --save-dev
//安裝 gulp-util gulp-uglify gulp-concat 插件
//gulp-uglify:用於壓縮js
//gulp-concat : 用於合併文件

 

---

建立配置文件gulpfile.js

要使用Gulp還須要進行相關的配置，把咱們的插件載入進去：

在項目的更目錄內建立一個gulpfile.js文件（必須是這個文件名），

舉個例子(安裝一個壓縮html的插件)

     

npm install gulp-htmlmin --save-dev
     //安裝html壓縮的插件

配置內容以下：

     

var gulp = require('gulp');
     var htmlmin = require('gulp-htmlmin');
 
     //建立一個任務
     gulp.task('minify',function(){
          gulp.src('src/*.html')
                 .pipe(htmlmin({collapseWhitespace:true}))
                 .pipe(gulp.dest('dist'))
     });

 

在該目錄下的控制檯中鍵入：

     

gulp minify   //執行壓縮html的任務

查看項目中目錄：

自動生成了一個dist文件夾，而且裏面有一個index.html文件

 

其餘插件也是一樣的方式進行配置，趕忙上手去試試吧，是否是以爲 so easy呢？

 

[1]: https://nodejs.org/en/download/

[2]: https://www.npmjs.com/  裏面有海量的插件庫