gulp從入門到上樹
哈哈，作爲21世紀的前端開發人員，gulp是必不可少的呀，可以不去認真的學，但是一定要去了解一下噻！好了廢話少說～
介紹一下－－Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js 是基於 Node.js 構建的,利用 Node.js 流的威力,你可以快速構建項目。好了廢話少說～
gulp 和 grunt 非常類似，但相比於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
本示例以壓縮css、js、然後打包zip，刪除文件夾 來展示gulp的常規用法，只要我們學會使用一個gulp插件後，其他插件就差看看其幫助文檔了。好了廢話少說～
gulp常用地址：
gulp官方網址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424
開始
首先要安裝，這個前提需要安裝nodeJS(作爲一個前端人員，現在都沒有裝node,可以拉出去了)；
第1步：在你的項目目錄下面新建一個src目錄,src目錄下面分別再新建mian/main.css和js/main.js，以及建一個demo1.html文件以防看效果
第2步： 打開命令行執行 npm init, 一路下去,這時候項目目錄下面就有了package.json這麼一個包文管理文件了
第3步：全局安裝 gulp：
npm install --global gulp第4步：在項目目錄安裝 gulp的依賴：
npm install --save-dev gulp第5步：在項目根目錄下創建一個名爲 gulpfile.js 的文件,這時候目錄如下圖
好了 這時候我們的準備工作都已經就位了，下面就是代碼時間
第6步：隨便給我們項目寫上一些例示的代碼。
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../dist/css/main.min.css">
</head>
<body>
<h1>asdasd</h1>
<script src="../dist/js/main.min.js"></script>
</body>
</html>main.css
h1{
font-size: 40px;
color: #fff;
border: 2px solid #444444;
}main.js
document.querySelectorAll('h1')[0].style.background = 'red';根據我們的目標 我們要把main.css何main.js打包到src/dist 文件下
打包呢要裝gulp插件 我們需要下面幾個插件
gulp-uglify（js壓縮）、 gulp-cssmin（css壓縮）、gulp-rimraf（文件刪除）、gulp-rename（文件重命名）、gulp-zip（zip包生成）
第7步： 然後就是把這些插件就安裝好了，例如 npm i gulp-uglify --save-dev；
第8步： 開始寫我們的gulpfile.js 代碼啦～～躍躍欲試了 鋪墊這麼久～～～首先 我們先做壓縮css和js；
gulpfile.js
// 引包, 一次性引進來～～安逸
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var rimraf = require('gulp-rimraf');
var zip = require('gulp-zip');
// 根據gulp-cssmin， gulp-uglify的官方文檔我們寫上
// 壓縮CSS
gulp.task('mcss', function () {
return gulp.src('src/main/main.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'));
});
// 壓縮JS
gulp.task('mjs', function () {
return gulp.src('src/js/main.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/js'));
});
gulp.task('defaul', ['mcss', 'mjs']);這個文件保存了，然後直接 命令行運行gulp
就會看到src 下面多了一個dist文件夾了， 如圖
裏面就是你壓縮好的css和js啦 不信 你運行demo1.html就能看到效果
別忘了，demo1.html裏面 <script src="../dist/js/main.min.js"></script> 是鏈接到這個。
第9步：好了，這會打包也打包好了，我們試試刪除文件夾，就刪除我們打包好的dist文件夾（這會是不是覺得好蛋疼，既然要刪除爲毛要包呀－－||）;問那麼多？？
我們在gulpfile.js 添加刪除文件夾的代碼
gulp.task('clear', function () {
return gulp.src(
['./dist'], {read: false}
).pipe(rimraf());
});然後在命令行直接執行 gulp clear 這會我們的文件夾就被刪除了。是不是很容易？？插件就是這麼容易噻。
第10步：有時候我們要給後端的是文件夾壓縮好的zip包，這時候gulp也能幫你開展工作， 鐺鐺鐺～～gulp-zip 這貨閃亮登場了，這個用法。直接上代碼。
我們在gulpfile.js 壓縮文件夾的代碼
// 壓縮文件夾
gulp.task('zip', function () {
var arr = ['css', 'js'];
for(var i = 0; i < arr.length; i++) {
gulp.src('./dist/' + arr[i])
.pipe(zip(arr[i] + '.zip'))
.pipe(gulp.dest('./zip'));
}
});這時候你先 gulp 打包生成了dist文件夾，然後gulp zip 命令進行壓縮
這會你的目錄下就多了一個zip文件夾，裏面就是壓縮後的zip包。
看了這麼久，終於到了上樹部分了，這會是不是覺得gulp幫你做了好多事，省了不少心。既然會了，那就多看文檔，讓你的項目飛起gulp吧。！！