使用gulp來構建一個前端項目

什么是gulp？

gulp是一個前端項目構建工具，是自動化項目的構建利器，它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成。你可以使用gulp及其插件對你的項目代碼（less,sass）進行編譯，還可以壓縮你的js和css代碼，甚至壓縮你的圖片等等。
我看了很多網上的資料，目前最流行的兩種使用JavaScript開發的構建工具是Grunt和Gulp。而grunt多用在文件較多，邏輯復雜的項目構建，如果只是用來管理小項目的話，gulp方便快捷，是最適合不過的了。

使用方法

• 先保證安裝了node，使用node -v 檢查是否已按轉node

• 然后在全局安裝gulp，是為了通過它來執行gulp任務，也可以通過gulp -v來檢查是否安裝成功。

  	npm install -g gulp
  

• 新建一個package.json文件（基於nodejs項目必不可少的配置文件）

  	npm init
  

  說明：使用此命令后，會出現很多選項，你根據提示填寫完畢就行了。比如項目名稱、版本號、項目描述等等...
  如下圖所示：
  

  特別提示：如果后面需要修改這個json文件，注意不能添加任何注釋。

• 安裝gulp需要用到的插件到這個項目，比如gulp-less

  	npm install gulp-less --save-dev
  

  說明：后面--save-dev 的意思是把gulp-less插件安裝到這個項目，package.json中會在依賴中自動加上gulp-less這個插件。

• 安裝grunt到這個項目

  	npm install gulp --save-dev
  

• 新建gulpfile.js文件

  • 在項目的根目錄下新建gulpfile.js（gulp項目的配置文件），其內容如下：

    ```js
    var gulp = require('gulp'),
            less = require('gulp-less');
        gulp.task('less', function () {
                gulp.src('./css/app.less')
                    .pipe(less())
                    .pipe(gulp.dest('./css'));
        });
        gulp.task('default',['less']);
    

  如下圖所示：
  

  • 上面配置文件主要干的事情就是把less文件變成css文件。用到了gulp的src、pipe、task、dest方法。下面會進行詳細介紹。

gulp的API

總的來說，gulp只有四個API，所以學習起來也非常容易，下面就對他們進行詳細的介紹。

• gulp.src(globs)

  • 說明：src方法是指定需要處理的源文件的路徑，globs參數必填（源文件路徑）；

  • 具體實例如下：

    	gulp.src('less/style.less')	 //指定less文件夾下的style.less文件
    	gulp.src('js/**/*.js')   //指定js目錄下所有子目錄里的所有js文件。
    	gulp.src(['js/**/*.js', '!js/**/*.min.js'])   //指定js目錄下所有js文件（除了以min.js結尾的文件）。
    

• gulp.dest(path)

  • 說明：dest方法是指定處理完后文件輸出的路徑。

  • 具體實例如下：

    	gulp.src('./css/app.less') //該任務針對的文件
                .pipe(less()) //該任務調用的模塊
                .pipe(gulp.dest('./css')); //將會在css/下生成app.css
    

  • 上面用到了一個pipe方法。gulp借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入。這里的意思是說：gulp.src(方法返回的是文件流，然后調用pipe方法的時候，直接輸入文件流。)

• gulp.task(name[, deps], fn)

  • 說明：task定義一個gulp任務。
  • 參數： name－任務的名稱； deps－此任務依賴的其他任務； fn－此任務進行的操作
  • 具體實例如下：

  	var cssMin = require('gulp-minify-css');
  	var rename = require('gulp-rename');
  	var concat = require('gulp-concat');
  	gulp.task('cssmin', ['less'], function() {      //css壓縮的任務（要等less任務完成之后）
  		    return gulp.src('./src/**/*.css')       //指定獲取到src下的所有css文件。
      		.pipe(cssMin())     //執行壓縮操作
      		.pipe(concat('app.css'))     //把所有文件連接合成一個文件
      		.pipe(rename({     //重命名
          		suffix: '-min'
      		}))
      		.pipe(gulp.dest('./build'));   //會在build文件夾下生成一個app.min.css文件
  	});
  

• gulp.watch(glob [, opts], tasks)

  • 說明：watch方法是用於監聽文件變化，文件一修改就會執行指定的任務

  • 具體實例如下：

  	gulp.task('watchtask', function () {
  		gulp.watch('./src/**/*.less', ['less'])     //如果src目錄下的less文件有變化，則執行less任務（壓縮less文件為css文件）
  	    gulp.watch('./demo/**/*.html', ['html'])
  		gulp.watch('./src/**/*', ['js'])
  	});
  

gulp插件

gulp的插件庫相當的豐富，與插件結合使用可以實現強大的功能，我們上面的過程中就用到了很多插件。比如：

• gulp-less：將less處理為css文件。
• gulp-concat：可以把多個文件合並為一個文件。
• gulp-minify-css：壓縮css文件。
• gulp-rename：重命名文件。

還有很多其他有用的插件，坐個簡單的整理：

• gulp-imagemin: 壓縮圖片。
• gulp-uglify: 壓縮js文件。
• gulp-jshint: 檢查js
• gulp-htmlmin: 壓縮html
• gulp-livereload: 服務器控制客戶端同步刷新(修改文件，瀏覽器自動刷新)
• run-sequence: 讓gulp任務，可以相互獨立，解除任務間的依賴，增強task復用