前端自動(dòng)化構(gòu)建可以幫我們做：合并html，清除、合并、壓縮css，拷貝圖片，監(jiān)控文件變化，運(yùn)行web服務(wù)器，打開(kāi)瀏覽器，使用webpack打包編譯js
構(gòu)建工具可以解放我們雙手，提高開(kāi)發(fā)效率

gulp是基于流的，使用的基本套路就是： 引入插件->注冊(cè)任務(wù)->輸入數(shù)據(jù)->任務(wù)處理->數(shù)據(jù)輸出

基于流怎么理解？

grunt是操作生成一個(gè)臨時(shí)文件；
gulp類似一個(gè)管道，文件讀進(jìn)來(lái)，執(zhí)行相應(yīng)的操作，然后生成最終的文件即可

gulp的基本概念：

gulp的基礎(chǔ)api（4個(gè)）

gulp.task：任務(wù)
gulp.src：目標(biāo)文件
gulp.dest：輸出的文件目錄
gulp.watch：監(jiān)測(cè)文件變化

接下來(lái)就是以項(xiàng)目實(shí)戰(zhàn)的方式說(shuō)下gulp的一些簡(jiǎn)單用法

1、全局安裝 gulp

npm install -g gulp

2、使用npm初始化項(xiàng)目

npm init

3、安裝項(xiàng)目依賴

$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
......

文件太多，就省略其他插件了，根據(jù)項(xiàng)目需要，進(jìn)入相應(yīng)的插件依賴（--save-dev命令是為了和項(xiàng)目關(guān)聯(lián)，安裝完成后可以在 package.json 文件中查看已安裝的插件依賴；另外如果我們?cè)趃ithub上下載了一個(gè)項(xiàng)目，打開(kāi)package.json文件，看到依賴了n多個(gè)插件，如果要像上面npm install xxx 一個(gè)一個(gè)安裝那就太痛苦了，可以使用 npm i 命令，就可以下載安裝所有的依賴插件了。）

4、在項(xiàng)目跟目錄下 新建 gulpfile.js 文件。在此文件中，需要使用require把上面依賴的插件引入進(jìn)文件中。

具體代碼：

 var gulp =require('gulp'),
     sass =require('gulp-sass'),
     concat =require('gulp-concat'),
     minifycss =require('gulp-minify-css'),
     uglify =require('gulp-uglify'),
     rename =require('gulp-rename'),
     autoprefixer =require('gulp-autoprefixer');

5、然后是使用gulp的幾個(gè)api完成我們項(xiàng)目的構(gòu)建工作。

一般構(gòu)建功能有：文件壓縮、文件合并、監(jiān)控文件變化...，我們就以文件壓為例，說(shuō)下具體怎樣用。

• 壓縮css文件

gulp.task("mini_css", function(cb){
   var cssSrc = ['./css/*.css'];
   return gulp.src(cssSrc)      //壓縮的文件 
        .pipe(concat('all.css'))    //合并所有css到all.css
        .pipe(gulp.dest('./main/css'))   //輸出文件夾
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./main/css')); //執(zhí)行壓縮
})

• 壓縮JS文件

gulp.task('minify_js',["clean"], function() {
    var jsSrc = ['./lib/*.js','!./lib/*.src.js'];
    return gulp.src(jsSrc)
        .pipe(concat('all.js'))    //合并所有js到all.js
        .pipe(gulp.dest('./lib'))    //輸出all.js到文件夾
        .pipe(rename({suffix: '.min'}))   //rename壓縮后的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest('./lib'));  //輸出
});

• 刪除文件

gulp.task('clean', function() {
   //執(zhí)行壓縮前，先刪除以前壓縮的文件
    return del(['./css/all.css', './css/all.min.css','./lib/all.min.js'])
});

• 任務(wù)集

gulp.task("dev", ["mini_css", "mini_js"])

6、執(zhí)行g(shù)ulp命令

• 可以單獨(dú)執(zhí)行一條命令

gulp minify_js

• 可以執(zhí)行一個(gè)任務(wù)的集合（這個(gè)適合項(xiàng)目定制任務(wù)集合，比如在開(kāi)發(fā)的時(shí)候需要使用watch監(jiān)測(cè)文件變化的功能，在上線環(huán)境就不需要這個(gè)功能了）

gulp dev // 這個(gè)dev對(duì)應(yīng)上面 任務(wù)集 聲明的變量

• 如果想省勁，可以使用 default 作為任務(wù)的名稱
  比如：

gulp.task("default ", ["mini_css", "mini_js"])

這時(shí)，在命令行就可以直接使用 gulp 命令，后面不需要在使用 任務(wù)名稱了。