前端自動化構(gòu)建可以幫我們做：合并html零抬，清除镊讼、合并病蛉、壓縮css官辽，拷貝圖片，監(jiān)控文件變化塑荒，運行web服務器忽妒，打開瀏覽器玩裙，使用webpack打包編譯js
構(gòu)建工具可以解放我們雙手兼贸，提高開發(fā)效率
gulp是基于流的，使用的基本套路就是： 引入插件->注冊任務->輸入數(shù)據(jù)->任務處理->數(shù)據(jù)輸出
基于流怎么理解吃溅？
grunt是操作生成一個臨時文件溶诞；
gulp類似一個管道，文件讀進來决侈，執(zhí)行相應的操作螺垢，然后生成最終的文件即可
gulp的基本概念：
gulp的基礎api（4個）
gulp.task：任務
gulp.src：目標文件
gulp.dest：輸出的文件目錄
gulp.watch：監(jiān)測文件變化
接下來就是以項目實戰(zhàn)的方式說下gulp的一些簡單用法
1、全局安裝 gulp
npm install -g gulp
2赖歌、使用npm初始化項目
npm init
3枉圃、安裝項目依賴
$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
......
文件太多，就省略其他插件了庐冯，根據(jù)項目需要讯蒲，進入相應的插件依賴（--save-dev命令是為了和項目關(guān)聯(lián)，安裝完成后可以在 package.json 文件中查看已安裝的插件依賴肄扎；另外如果我們在github上下載了一個項目墨林，打開package.json文件，看到依賴了n多個插件犯祠，如果要像上面npm install xxx 一個一個安裝那就太痛苦了旭等，可以使用 npm i 命令，就可以下載安裝所有的依賴插件了衡载。）
4搔耕、在項目跟目錄下 新建 gulpfile.js 文件。在此文件中痰娱，需要使用require把上面依賴的插件引入進文件中弃榨。
具體代碼：
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的幾個api完成我們項目的構(gòu)建工作梨睁。
一般構(gòu)建功能有：文件壓縮鲸睛、文件合并、監(jiān)控文件變化...坡贺，我們就以文件壓為例官辈，說下具體怎樣用。
- 壓縮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'])
});
- 任務集
gulp.task("dev", ["mini_css", "mini_js"])
6拳亿、執(zhí)行g(shù)ulp命令
- 可以單獨執(zhí)行一條命令
gulp minify_js
- 可以執(zhí)行一個任務的集合（這個適合項目定制任務集合，比如在開發(fā)的時候需要使用watch監(jiān)測文件變化的功能愿伴，在上線環(huán)境就不需要這個功能了）
gulp dev // 這個dev對應上面 任務集 聲明的變量
- 如果想省勁肺魁，可以使用 default 作為任務的名稱
比如：
gulp.task("default ", ["mini_css", "mini_js"])
這時，在命令行就可以直接使用 gulp 命令隔节，后面不需要在使用 任務名稱了鹅经。
